Title: [213363] trunk/Websites/webkit.org
- Revision
- 213363
- Author
- [email protected]
- Date
- 2017-03-03 05:02:49 -0800 (Fri, 03 Mar 2017)
Log Message
Unreviewed, minor updates on CSS Grid Layout examples.
* demos/css-grid/index.html:
* demos/css-grid/responsive-grid.html:
Modified Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (213362 => 213363)
--- trunk/Websites/webkit.org/ChangeLog 2017-03-03 11:38:58 UTC (rev 213362)
+++ trunk/Websites/webkit.org/ChangeLog 2017-03-03 13:02:49 UTC (rev 213363)
@@ -1,3 +1,10 @@
+2017-03-03 Manuel Rego Casasnovas <[email protected]>
+
+ Unreviewed, minor updates on CSS Grid Layout examples.
+
+ * demos/css-grid/index.html:
+ * demos/css-grid/responsive-grid.html:
+
2017-02-27 Simon Fraser <[email protected]>
Add css-status page on webkit.org
Modified: trunk/Websites/webkit.org/demos/css-grid/index.html (213362 => 213363)
--- trunk/Websites/webkit.org/demos/css-grid/index.html 2017-03-03 11:38:58 UTC (rev 213362)
+++ trunk/Websites/webkit.org/demos/css-grid/index.html 2017-03-03 13:02:49 UTC (rev 213363)
@@ -116,10 +116,11 @@
<pre>
display: grid;
- grid: repeat(4, 100px) / repeat(4, 150px);
+ grid-template-rows: repeat(4, 100px);
+ grid-template-columns: repeat(4, 150px);
</pre>
-<div class="grid" style="grid: repeat(4, 100px) / repeat(4, 150px);">
+<div class="grid" style="grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(4, 150px);">
<div class="item-1 small" style="grid-row: 3; grid-column: 2;">grid-row: 3;<br><br>grid-column: 2;</div>
<div class="item-2 medium" style="grid-row: 2 / 5; grid-column: 3 / span 2;">grid-row: 2 / 5;<br><br>grid-column:<br>3 / span 2;</div>
</div>
@@ -130,7 +131,8 @@
<pre>
display: grid;
- grid: 100px 100px / 150px 150px 150px;
+ grid-template-rows: 100px 100px;
+ grid-template-columns: 150px 150px 150px;
height: 500px;
width: 650px;
align-content: center;
@@ -137,7 +139,7 @@
justify-content: space-evenly;
</pre>
-<div class="grid" style="grid: 100px 100px / 150px 150px 150px; height: 500px; width: 650px; align-content: center; justify-content: space-evenly;">
+<div class="grid" style="grid-template-rows: 100px 100px; grid-template-columns: 150px 150px 150px; height: 500px; width: 650px; align-content: center; justify-content: space-evenly;">
<div class="item-1 small" style="grid-row: 1; grid-column: 1 / 3;">grid-row: 1;<br><br>grid-column: 1 / 3;</div>
<div class="item-2 small" style="grid-row: 1 / 3; grid-column: 3;">grid-row: 1 / 3;<br><br>grid-column: 3;</div>
<div class="item-3 small" style="grid-row: 2; grid-column: 1;">grid-row: 2;<br><br>grid-column: 1;</div>
@@ -148,10 +150,11 @@
<pre>
display: grid;
- grid: 200px 200px / 400px 400px;
+ grid-template-rows: 200px 200px;
+ grid-template-columns: 400px 400px;
</pre>
-<div class="grid" style="grid: 200px 200px / 400px 400px;">
+<div class="grid" style="grid-template-rows: 200px 200px; grid-template-columns: 400px 400px;">
<div class="item-1 medium" style="align-self: stretch; justify-self: stretch;">align-self: stretch;<br><br>justify-self: stretch;</div>
<div class="item-2 medium" style="align-self: end; justify-self: start;">align-self: end;<br><br>justify-self: start;</div>
<div class="item-3 medium" style="grid-column: span 2; align-self: center; justify-self: center;">grid-column: span 2;<br><br>align-self: center;<br><br>justify-self: center;</div>
@@ -164,15 +167,15 @@
grid-gap: 10px 20px;
grid-template-rows: 100px 1fr auto;
grid-template-columns: 1fr 200px;
- grid-template-areas: "title title"
- "content aside"
- "footer aside";
+ grid-template-areas: "header header"
+ "content aside "
+ "footer aside ";
@media (max-width: 600px) {
grid-gap: 0;
grid-template-rows: auto 1fr auto auto;
grid-template-columns: 1fr;
- grid-template-areas: "title "
+ grid-template-areas: "header "
"content"
"aside "
"footer ";
Modified: trunk/Websites/webkit.org/demos/css-grid/responsive-grid.html (213362 => 213363)
--- trunk/Websites/webkit.org/demos/css-grid/responsive-grid.html 2017-03-03 11:38:58 UTC (rev 213362)
+++ trunk/Websites/webkit.org/demos/css-grid/responsive-grid.html 2017-03-03 13:02:49 UTC (rev 213363)
@@ -50,13 +50,13 @@
grid-gap: 10px 20px;
grid-template-rows: 100px 1fr auto;
grid-template-columns: 1fr 200px;
- grid-template-areas: "title title"
- "content aside"
- "footer aside";
+ grid-template-areas: "header header"
+ "content aside "
+ "footer aside ";
}
- .title {
- grid-area: title;
+ .header {
+ grid-area: header;
}
.content {
@@ -76,7 +76,7 @@
grid-gap: 0;
grid-template-rows: auto 1fr auto auto;
grid-template-columns: 1fr;
- grid-template-areas: "title "
+ grid-template-areas: "header "
"content"
"aside "
"footer ";
@@ -85,7 +85,7 @@
</style>
<div class="grid responsive">
- <div class="item-1 title">Title</div>
+ <div class="item-1 header">Header</div>
<div class="item-2 content">Content</div>
<div class="item-3 aside">Aside</div>
<div class="item-4 footer">Footer</div>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
