mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 21:37:35 +00:00
LibWeb: Add display grid automated tests
This commit is contained in:
martinfalisse
Andreas Kling
parent
7028f75779
commit
57cdb0c972
24 changed files with 1287 additions and 0 deletions
22
Tests/LibWeb/Layout/input/grid/auto-fill.html
Normal file
22
Tests/LibWeb/Layout/input/grid/auto-fill.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/grid/auto-fit.html
Normal file
22
Tests/LibWeb/Layout/input/grid/auto-fit.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/grid/basic.html
Normal file
22
Tests/LibWeb/Layout/input/grid/basic.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Should render a 2x2 grid -->
|
||||
<div class="grid-container" style="grid-template-columns: auto auto;">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
24
Tests/LibWeb/Layout/input/grid/different-column-sizes.html
Normal file
24
Tests/LibWeb/Layout/input/grid/different-column-sizes.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Should render a 2x2 grid with columns 50px and 50% -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 50px 50%;
|
||||
grid-template-rows: auto auto;">
|
||||
<div class="grid-item" style="grid-column: 1 / 1; grid-row: 1 / 1">1</div>
|
||||
<div class="grid-item" style="grid-column: 2 / 2; grid-row: 1 / 1">2</div>
|
||||
<div class="grid-item" style="grid-column: 1 / 1; grid-row: 2 / 2">3</div>
|
||||
<div class="grid-item" style="grid-column: 2 / 2; grid-row: 2 / 2">4</div>
|
||||
</div>
|
||||
62
Tests/LibWeb/Layout/input/grid/gap.html
Normal file
62
Tests/LibWeb/Layout/input/grid/gap.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- There should be a large (50px) column gap and small (10px) row gap -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: auto auto;
|
||||
gap: 10px 50px;
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
|
||||
<!-- There should be a Z-shaped gap (with both vertical and horizontal gap) -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: auto auto;
|
||||
gap: calc(1vh + 10px) calc(10% - 10px);
|
||||
">
|
||||
<div class="grid-item" style="grid-column: 2 / span 1">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Column-gaps with overflowing column spans -->
|
||||
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
||||
<div class="grid-container" style="
|
||||
grid-column-gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
">
|
||||
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
|
||||
</div>
|
||||
|
||||
<!-- Column-gaps with overflowing column spans and row spans -->
|
||||
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
||||
<div class="grid-container" style="
|
||||
grid-column-gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 20px;
|
||||
">
|
||||
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
|
||||
</div>
|
||||
|
||||
<!-- Bug with column gaps - grid items should have normal height -->
|
||||
<div class="grid-container with-border" style="
|
||||
grid-column-gap: 10px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
">
|
||||
<div class="grid-item with-border">left side text</div>
|
||||
<div class="grid-item with-border">right side text right side text right side text</div>
|
||||
</div>
|
||||
32
Tests/LibWeb/Layout/input/grid/image-in-grid.html
Normal file
32
Tests/LibWeb/Layout/input/grid/image-in-grid.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Should render a 64px wide image -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: auto 0 minmax(0, 100%);
|
||||
">
|
||||
<div class="wrapper" style="width: 100%;">
|
||||
<img style="width: 100%;" src="data:image/jpeg;base64,
|
||||
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
|
||||
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
|
||||
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
|
||||
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
|
||||
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
|
||||
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
|
||||
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
|
||||
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
|
||||
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
|
||||
</div>
|
||||
</div>
|
||||
23
Tests/LibWeb/Layout/input/grid/min-max-content.html
Normal file
23
Tests/LibWeb/Layout/input/grid/min-max-content.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: min-content max-content 1fr;
|
||||
grid-template-areas: 'one two three';
|
||||
">
|
||||
<div class="grid-item" style="grid-area: one; min-width: 25%; max-width: 50%;">min-content</div>
|
||||
<div class="grid-item" style="grid-area: two;">max-content</div>
|
||||
<div class="grid-item" style="grid-area: three;">1fr</div>
|
||||
</div>
|
||||
75
Tests/LibWeb/Layout/input/grid/minmax.html
Normal file
75
Tests/LibWeb/Layout/input/grid/minmax.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
|
||||
they will expand up to 300px each. -->
|
||||
<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic minmax vertical
|
||||
Since there is no vertical limit, the two rows should be 50px high each. -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Invalid minmax value as can't have a flexible length as a minimum value.
|
||||
Should render 2 items with no grid formatting (one on top of the other) -->
|
||||
<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
|
||||
Should render 2 items with no grid formatting (one on top of the other) -->
|
||||
<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic minmax vertical
|
||||
Since there is a height limit, the rows should be 25px high each. -->
|
||||
<div class="grid-container" style="
|
||||
height: 50px;
|
||||
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
|
||||
<!-- Minmax horizontal with maximum as flex
|
||||
3 columns with minimum 200px and maximum 100%. -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
|
||||
<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">Article content</div>
|
||||
<div class="grid-item">3</div>
|
||||
</div>
|
||||
62
Tests/LibWeb/Layout/input/grid/named-tracks.html
Normal file
62
Tests/LibWeb/Layout/input/grid/named-tracks.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Should render a 2 columned grid -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns:
|
||||
[a] auto
|
||||
[b] auto;
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: a;">1</div>
|
||||
<div class="grid-item" style="grid-column-start: b;">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
|
||||
<!-- Named tracks there should be 4 grid items in a circle with a space in the middle -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
|
||||
grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
|
||||
">
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: main-start;
|
||||
grid-row-start: main-start;
|
||||
grid-row-end: main-end;
|
||||
">1</div>
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: content-end;
|
||||
grid-row-start: main-start;
|
||||
grid-row-end: content-end;
|
||||
">2</div>
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: content-start;
|
||||
grid-row-start: main-start;
|
||||
">3</div>
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: content-start;
|
||||
grid-column-end: main-end;
|
||||
grid-row-start: content-end;
|
||||
">4</div>
|
||||
</div>
|
||||
|
||||
<!-- Named lines inside repeat -->
|
||||
<!-- Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2 -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: name2;">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
67
Tests/LibWeb/Layout/input/grid/positions-and-spans.html
Normal file
67
Tests/LibWeb/Layout/input/grid/positions-and-spans.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Column end and span -->
|
||||
<!-- There should be a column spanning 8 units, and then one spanning 4 -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(12,minmax(0,5fr));
|
||||
">
|
||||
<div class="grid-item" style="
|
||||
grid-column-end: span 8;
|
||||
">1</div>
|
||||
<div class="grid-item" style="
|
||||
grid-column-end: span 4;
|
||||
">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Column start span takes priority over column end span -->
|
||||
<!-- There should be a column spanning 4 units, and then one spanning 8 -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(12,minmax(0,5fr));
|
||||
">
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: span 4;
|
||||
grid-column-end: span 8;
|
||||
">1</div>
|
||||
<div class="grid-item" style="
|
||||
grid-column-start: span 8;
|
||||
grid-column-end: span 4;
|
||||
">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Row end and span -->
|
||||
<!-- There should be a row spanning 2 units, and then one spanning 3 -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-rows: repeat(5, 20px);
|
||||
">
|
||||
<div class="grid-item" style="
|
||||
grid-row-end: span 2;
|
||||
">1</div>
|
||||
<div class="grid-item" style="
|
||||
grid-row-end: span 3;
|
||||
">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
|
||||
<!-- The bottom row should take up half the width of the grid. -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr;
|
||||
">
|
||||
<div class="grid-item" style="
|
||||
grid-column: 1 / span 3;
|
||||
grid-row: 1;
|
||||
">1</div>
|
||||
<div class="grid-item">1</div>
|
||||
</div>
|
||||
41
Tests/LibWeb/Layout/input/grid/repeat.html
Normal file
41
Tests/LibWeb/Layout/input/grid/repeat.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Should render a full-width 4x4 grid with:
|
||||
- one large column on the left
|
||||
- one large column on the right, being split in half vertically, with the number 2 in the top half,
|
||||
and numbers 3, 4, 5, and 6 in the bottom -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-template-rows: repeat(2, 25px 25px 25px 25px );
|
||||
">
|
||||
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
|
||||
<div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
|
||||
<div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
|
||||
<div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
|
||||
<div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
|
||||
<div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple repeats -->
|
||||
<!-- Should render 2 50px columns and 2 100px columns -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: repeat(2, 50px) repeat(2, 100px)
|
||||
">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
63
Tests/LibWeb/Layout/input/grid/template-areas.html
Normal file
63
Tests/LibWeb/Layout/input/grid/template-areas.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Grid template areas basics -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'left right-top'
|
||||
'left right-bottom';
|
||||
">
|
||||
<div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">
|
||||
right-bottom</div>
|
||||
<div style="background-color: lightgreen; grid-area: left;">left</div>
|
||||
<div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid-lines vs. Grid template areas -->
|
||||
<!-- There should be a left-aligned column taking up 1 / 3 of the Grid -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
|
||||
grid-template-areas: 'a b c';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas -->
|
||||
<!-- Column taking up 50% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
|
||||
<!-- Left-aligned column taking up 25% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four one';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
|
||||
<!-- Left-aligned column taking up 25% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue