mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
Tests/LibWeb: Split input/grid/minmax.html into smaller tests
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
0dcc93ed3d
commit
f2323b5b99
Notes:
sideshowbarker
2024-07-16 20:25:41 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/f2323b5b99 Pull-request: https://github.com/SerenityOS/serenity/pull/18739
14
Tests/LibWeb/Layout/expected/grid/minmax-1.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-1.txt
Normal file
@ -0,0 +1,14 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <div.one> at (8,8) content-size 300x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.two> at (308,8) content-size 300x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
14
Tests/LibWeb/Layout/expected/grid/minmax-2.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-2.txt
Normal file
@ -0,0 +1,14 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x50 [GFC] children: not-inline
|
||||
BlockContainer <div.one> at (8,8) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.two> at (308,8) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
19
Tests/LibWeb/Layout/expected/grid/minmax-3.txt
Normal file
19
Tests/LibWeb/Layout/expected/grid/minmax-3.txt
Normal file
@ -0,0 +1,19 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <div.one> at (8,8) content-size 292x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.two> at (300,8) content-size 200x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [300,8 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.three> at (500,8) content-size 292x17.46875 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [500,8 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
14
Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
Normal file
@ -0,0 +1,14 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
|
||||
BlockContainer <div.one> at (8,8) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.two> at (8,25.46875) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
@ -1,168 +0,0 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x222.28125 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,8) content-size 300x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (308,8) content-size 300x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,25.46875) content-size 784x50 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,25.46875) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (308,25.46875) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,25.46875 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,75.46875) content-size 784x34.9375 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,75.46875) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,75.46875 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,92.9375) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,92.9375 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,110.40625) content-size 784x34.9375 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,110.40625) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,110.40625 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,127.875) content-size 784x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,127.875 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,145.34375) content-size 784x50 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,145.34375) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,145.34375 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (308,145.34375) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,145.34375 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,170.34375) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,170.34375 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (308,170.34375) content-size 300x25 [BFC] children: inline
|
||||
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [308,170.34375 7.75x17.46875]
|
||||
"4"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,195.34375) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,195.34375) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,195.34375 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (269.333343,195.34375) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,195.34375 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (530.666687,195.34375) content-size 261.333312x17.46875 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,195.34375 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,212.8125) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,212.8125) content-size 56.218711x17.46875 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,212.8125 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (64.218711,212.8125) content-size 671.5625x17.46875 [BFC] children: inline
|
||||
line 0 width: 125.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 15, rect: [64.218711,212.8125 125.265625x17.46875]
|
||||
"Article content"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (735.781188,212.8125) content-size 56.218688x17.46875 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [735.781188,212.8125 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal file
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal file
@ -0,0 +1,15 @@
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||
17
Tests/LibWeb/Layout/input/grid/minmax-2.html
Normal file
17
Tests/LibWeb/Layout/input/grid/minmax-2.html
Normal file
@ -0,0 +1,17 @@
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||
/* FIXME: We currently does not layout this correctly. Rows take 25px even if 50px are available. */
|
||||
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||
19
Tests/LibWeb/Layout/input/grid/minmax-3.html
Normal file
19
Tests/LibWeb/Layout/input/grid/minmax-3.html
Normal file
@ -0,0 +1,19 @@
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: minmax(200px, 1fr) minmax(100px, 200px) minmax(200px, 1fr);
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: palevioletred;
|
||||
}
|
||||
</style><div class="container"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div>
|
||||
18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
Normal file
18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
Normal file
@ -0,0 +1,18 @@
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
|
||||
/* Invalid minmax value as can't have a flexible length as a minimum value. */
|
||||
grid-template-columns: minmax(1fr, 100px) 1fr 1fr;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</style>
|
||||
<div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||
@ -1,71 +0,0 @@
|
||||
<style>
|
||||
.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>
|
||||
Loading…
Reference in New Issue
Block a user