summaryrefslogtreecommitdiff
path: root/Tests/LibWeb
diff options
context:
space:
mode:
authorAliaksandr Kalenik <kalenik.aliaksandr@gmail.com>2023-05-09 00:27:17 +0300
committerAndreas Kling <kling@serenityos.org>2023-05-09 06:37:30 +0200
commitf2323b5b9985834df44939106d6655ef8de689f0 (patch)
treea122c4fc63b5b00f9be9e93c1a42c0bffdc09634 /Tests/LibWeb
parent0dcc93ed3d87094923cf2d34febf307c9c78c381 (diff)
downloadserenity-f2323b5b9985834df44939106d6655ef8de689f0.zip
Tests/LibWeb: Split input/grid/minmax.html into smaller tests
Diffstat (limited to 'Tests/LibWeb')
-rw-r--r--Tests/LibWeb/Layout/expected/grid/minmax-1.txt14
-rw-r--r--Tests/LibWeb/Layout/expected/grid/minmax-2.txt14
-rw-r--r--Tests/LibWeb/Layout/expected/grid/minmax-3.txt19
-rw-r--r--Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt14
-rw-r--r--Tests/LibWeb/Layout/expected/grid/minmax.txt168
-rw-r--r--Tests/LibWeb/Layout/input/grid/minmax-1.html15
-rw-r--r--Tests/LibWeb/Layout/input/grid/minmax-2.html17
-rw-r--r--Tests/LibWeb/Layout/input/grid/minmax-3.html19
-rw-r--r--Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html18
-rw-r--r--Tests/LibWeb/Layout/input/grid/minmax.html71
10 files changed, 130 insertions, 239 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-1.txt b/Tests/LibWeb/Layout/expected/grid/minmax-1.txt
new file mode 100644
index 0000000000..2bf71efa74
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/minmax-1.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-2.txt b/Tests/LibWeb/Layout/expected/grid/minmax-2.txt
new file mode 100644
index 0000000000..5c8b5715ee
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/minmax-2.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-3.txt b/Tests/LibWeb/Layout/expected/grid/minmax-3.txt
new file mode 100644
index 0000000000..793f8fc988
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/minmax-3.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt b/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
new file mode 100644
index 0000000000..b4e82b511e
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax.txt b/Tests/LibWeb/Layout/expected/grid/minmax.txt
deleted file mode 100644
index 25afce72a9..0000000000
--- a/Tests/LibWeb/Layout/expected/grid/minmax.txt
+++ /dev/null
@@ -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>
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-1.html b/Tests/LibWeb/Layout/input/grid/minmax-1.html
new file mode 100644
index 0000000000..1ad6f3128c
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-1.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-2.html b/Tests/LibWeb/Layout/input/grid/minmax-2.html
new file mode 100644
index 0000000000..3f0b214aea
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-2.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-3.html b/Tests/LibWeb/Layout/input/grid/minmax-3.html
new file mode 100644
index 0000000000..2a1bf08c8d
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-3.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
new file mode 100644
index 0000000000..563617a177
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax.html b/Tests/LibWeb/Layout/input/grid/minmax.html
deleted file mode 100644
index 56cc996fd8..0000000000
--- a/Tests/LibWeb/Layout/input/grid/minmax.html
+++ /dev/null
@@ -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> \ No newline at end of file