CSS的功能最終強大到能輕鬆實現我們的設計目標，這是一個web開發人員最美好的時代。現在，讓我們使用超讚的工具——Grid佈局來建立一個主頁。
下面是我們將要實現的頁面
#在我們開始編碼之前，我們需要進入網格的思維模式。 第一步是觀察我們的設計稿，並將其劃分為主要的網格組件。 以下是我為此設計所做的劃分：
你會發現整個頁面分成7個頂層網格區域。 我之所以說「頂級」是因為我們可以在其內部繼續嵌套網格，這正是我們將要對hero部分所做的事：
body 的直接後代的7個元素：top-bar、main-header、hero 、 blog-posts、 news、 side-bar 以及main-footer。 body將成為我們的網格容器(grid container)，它的孩子將成為網格項目(grid items)。
hero 作為網格容器。 它有兩個孩子，將作為網格項目：message 和 award。
<body> <header class="top-bar"> <!-- social links and contact info --> </header> <header class="main-header"> <!-- logo and main navigation --> </header> <section class="hero"> <p class="message"> <!-- circular element --> </p> <p class="award"> <!-- award image and quote --> </p> </section> <section class="blog-posts"> <!-- blog posts and excerpts --> </section> <section class="news"> <!-- news headlines and excerpts --> </section> <aside class="side-bar"> <!-- critter of the month info --> </aside> <footer class="main-footer"> <!-- footer menu and copyright --> </footer> </body>
body上定義主網格容器：
body{
display: grid;
grid-template-columns: 12% auto 400px 12%;
grid-template-rows: auto auto 950px auto auto auto;
}side-bar元素的地方，我們希望這是一個固定的寬度。 hero 元素（第三行）的固定高度為950px。
grid-template-areas來定義某個網格區域會跑到哪裡。 這是非常有趣的部分：
body{
display: grid;
grid-template-columns: 12% auto 400px 12%;
grid-template-rows: auto auto 950px auto auto auto;
grid-template-areas: "top-bar top-bar top-bar top-bar"
"main-header main-header main-header main-header"
"hero hero hero hero"
". blog-posts side-bar ."
". news side-bar ."
"main-footer main-footer main-footer main-footer";
}grid-template-areas讓我們能把元素放在任何想要放置的地方，並且對於元素的佈局該屬性給我們提供一個不錯的可視化。 值得注意的是，這裡使用的值（top-bar，main-header，hero等）不是指那些元素的類別名，而是指我們用grid-area屬性給它們起的名字，下一步我們將對它們命名。
top-bar 橫跨四列，side-bar橫跨四行和五行。 .號碼代表空白單元格。如果你回頭看看上面的完整設計，你會看到這個定義如何與我們的網格模式相符。
.top-bar{
grid-area: top-bar;
}
.main-header{
grid-area: main-header;
}
.hero{
grid-area: hero;
}
.blog-posts{
grid-area: blog-posts;
}
.news{
grid-area: news;
}
.side-bar{
grid-area: side-bar;
}
.main-footer{
grid-area: main-footer;
}
hero 部分中的網格項目外，所有內容都完全依需求正確放置，我們差不多要完成了。
hero 部分之前，我想解釋一下一些難以理解的地方：主要內容兩邊的填充區域的設定。 作為提醒，我們再次把剛剛的設定搬過來，用以下方式調整列：
body{
grid-template-columns: 12% auto 400px 12%;
}设置为12％的两列用于填充主要内容两边的空白，但是它们仅用于第四行和第五行。 回想一下，我们告诉我们的top-bar、main-header、hero和main-footer元素跨越所有列，包括这两个“填充”列。 我们为什么这样做？ 因为我们希望这些元素的背景色横跨越整个视窗宽度，且任何一侧都没有空白。 我们只想在 blog-post/news和sidebar元素周围留出空白（第四行和第五行）。
为了让元素水平覆盖整个宽度，同时让元素里面的内容保存一定的padding，我们需要显示地在这些元素上设置padding：
.top-bar{
padding: 4px 12%;
}
.main-header{
padding: 12px 12%;
}
.hero{
padding: 55px 12% 0 12%;
}
.main-footer{
padding: 25px 12%;
}我们给元素设置左右 padding 为12％，这和grid-template-areas定义中的第一列和最后一列的宽度是一样的。 现在，需要填充整个宽度的元素最终呈现的结果是，背景横跨水平宽度，但其内容在两侧都预留出12％的空白。 很赞！
好了，让我们来修复 hero 部分。 这也将是一个网格容器，因此我们把它定义为一个网格，就像刚刚做过的那样：
.hero{
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto auto;
grid-template-areas: ". . award"
"message . . "
". . . ";
}这是一个3×3的网格，除了中间的列，其它都设置为 auto。 我们给中间一列大小设为1fr，因为我们希望在第一列和最后一列用东西填充后，剩下的空间完全需要完全填满。
hero中只有两个元素：message和award。 我们要message占据第二行的第一列，我们要award占据第一行的第三列。所以我们的完整网格定义应该如下所示：
.hero{
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto auto;
grid-template-areas: ". . award"
"message . . "
". . . ";
}下面我们所要做的就是命名我们的元素：
.message{
grid-area: message;
}
.award{
grid-area: award;
}就这样，message和award卡入到位，我们的页面完成：
CSS Grid 使用媒体查询让重新排列整个布局变得非常简单。你所做的就是重新放置你的网格项。现在回到我们的设计，简单起见，我们只对两个宽度临界值做响应式处理，1600px 和 1050px。我们需要对一些元素（padding、margin等）进行一些小的样式调整，但是我不会把所有的样式调整都全部展示在这里。后面我会放出完整的代码，现在我们只需要关注关注网格相关的东西即可。
1600px 这个临界点的处理比较简单，当浏览器宽度到底1600px时我们将减少网站外部填充的地方。 之所以选择1600px，是到了这个宽度后12％填充看起来不太合适。为了解决这个问题，我们需要做的是在body上改变grid-template-columns的值，将第一列和最后一列减少到2％。 我们还需要调整其他元素的填充以匹配：
@media (max-width: 1600px) {
body{
grid-template-columns: 2% auto 400px 2%;
}
.top-bar{
padding: 4px 2%;
}
.main-header{
padding: 12px 2%;
}
.hero{
padding: 55px 2% 0 2%;
}
.main-footer{
padding: 25px 2%;
}
}对于下一个临界值，我们对网格项重新排列，使它们排列在一个列中。 再次回头看看我们原来的代码是如何对body进行设置的：
body{
display: grid;
grid-template-columns: 12% auto 400px 12%;
grid-template-rows: auto auto 950px auto auto auto;
grid-template-areas: "top-bar top-bar top-bar top-bar"
"main-header main-header main-header main-header"
"hero hero hero hero"
". blog-posts side-bar ."
". news side-bar ."
"main-footer main-footer main-footer main-footer";
}下面是重新设置的媒体查询：
@media (max-width: 1050px) {
body{
grid-template-columns: 3% auto 3%;
grid-template-rows: auto auto auto auto auto auto auto;
grid-template-areas: "top-bar top-bar top-bar"
"main-header main-header main-header"
"hero hero hero"
". blog-posts ."
". news ."
". side-bar ."
"main-footer main-footer main-footer";
}
}我们在这里做了一些重要的改变：将列数从四个减少到三个，将第一列和最后一列的值改为3％（3％在较窄的宽度上优于2％），添加了 附加行，将所有行的长度改为auto，并将side-bar移动到自己的行。 现在我们的页面元素很适合在较窄的宽度下展示：
下面是我们的主页，以及完整的HTML和CSS文件。 你需要一个支持grid的浏览器来查看预览。 我建议启用Experimental Web Platform Features标志的Chrome 49+（地址栏输入 chrome：// flags ，并向下滚动到“Experimental Web Platform Features”）。
下面的嵌入式页面默认会以移动视图展示，可以点击“Edit on Codepen”在页面全宽下展示不同的效果：
在 CodePen 查看效果 Building a Home Page with Grid by Chris House (@chrishouse) .
补充：基本布局代码
相关推荐：
以上是CSS使用Grid佈局建立網站首頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！
