From d5bd11e45b039aa128ba7943ba11ede5f255e9f3 Mon Sep 17 00:00:00 2001
From: djy0
/* using the template syntax */
#grid {
- display: grid;
- grid-template-areas: ". a"
- "b a"
- ". a";
- grid-template-columns: 150px 1fr;
- grid-template-rows: 50px 1fr 50px;
+ display: grid;
+ grid-template-areas: ". a"
+ "b a"
+ ". a";
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 50px 1fr 50px;
}
#item1 { grid-area: a }
From bb163246e1900ed9a277a82ea170e0a724a0b1da Mon Sep 17 00:00:00 2001
From: Eric Willigers
/* using the template syntax */
#grid {
- display: grid;
- grid-template-areas: ". a"
- "b a"
- ". a";
- grid-template-columns: 150px 1fr;
- grid-template-rows: 50px 1fr 50px;
+ display: grid;
+ grid-template-areas: ". a"
+ "b a"
+ ". a";
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 50px 1fr 50px;
}
#item1 { grid-area: a }
From 8fa47656b4c5b5cbd8ab899dadfc88ae8bda0ee2 Mon Sep 17 00:00:00 2001
From: Eric Willigers
<div style="display: grid">
- <!-- grid item: block child -->
- <div id="item1">block</div>
-
- <!-- grid item: floated element; floating is ignored -->
- <div id="item2" style="float: left;">float</div>
-
- <!-- grid item: anonymous block box around inline content -->
- anonymous item 3
-
- <!-- grid item: inline child -->
- <span>
- item 4
- <!-- grid items do not split around blocks -->
- <q style="display: block" id=not-an-item>item 4</q>
- item 4
- </span>
+ <!-- grid item: block child -->
+ <div id="item1">block</div>
+
+ <!-- grid item: floated element; floating is ignored -->
+ <div id="item2" style="float: left;">float</div>
+
+ <!-- grid item: anonymous block box around inline content -->
+ anonymous item 3
+
+ <!-- grid item: inline child -->
+ <span>
+ item 4
+ <!-- grid items do not split around blocks -->
+ <q style="display: block" id=not-an-item>item 4</q>
+ item 4
+ </span>
</div>