我们在绘制它们时按顺序在网格容器中定义这些区域。grid-template-areas:"headerheader""sidebarmain""footerfooter";目前侧边栏在左侧，主要区域内容在右侧，您也可以根据需要轻松更改顺序。需要注意的一件事：这些名称需要“链接”到样式。所以你需要添加grid-area:header;在标题块中。标头{网格区域：标头；填充：20px0；显示：网格；grid-template-columns:1fr1fr;}HTML结构与Flexbox示例中的相同，但创建网格布局的CSS完全不同。使用CSSGrid布局时，设置display:grid;很重要在容器中。这里声明grid-template-columns是为了保证页面的整体结构。此处grid-template-column已将侧边栏和主要内容区域大小设置为1fr和3fr。fr是网格的小数单位。.container{最大宽度：900px；背景色：#fff；保证金：0自动；填充：060px；显示：网格；网格模板列：1fr3fr；grid-template-areas:"headerheader""sidebarmain""footerfooter";grid-gap:50px;}接下来需要调整header容器中的fr单位。将grid-template-columns设置为1fr和1fr。这样，标题中就有两列大小相同的列，导航项和按钮将非常适合。标头{网格区域：标头；显示：网格；grid-template-columns:1fr1fr;}要放置按钮，我们只需要将justify-self设置为结束。headerbutton{justify-self:end;}导航的位置设置如下：headernav{justify-self:start;}使用Flexbox和CSSGrid创建布局最后，我们结合Flexbox创建更复杂的布局和CSS网格。基本布局如下图所示：这种布局需要在行列方向上保持一致，所以使用CSSGrid来实现整体布局是非常有效的。规划对于布局的实现非常重要。接下来我们一步步看看代码是如何实现的。首先显示：网格；是基本设置，其次，内容块之间的间距可以通过grid-column-gap和grid-row-gap来实现。.container{显示：网格；网格模板列：0.4fr0.3fr0.3fr；网格列间隙：10px；grid-row-gap:15px;}列和行布局标题部分跨越所有列。.header{网格列开始：1;网格列端：4；网格行开始：1；网格行尾：2；background-color:#d5c9e2;}也可以使用速记，startValue和endvalue在同一行，用斜线隔开。像这样：.header{grid-column:1/4;网格行：1/2；background-color:#55d4eb;}构建网格布局后，下一步就是微调内容。NavigationFlexbox非常适合放置标题元素。基本页眉布局需要设置justify-content:space-between。在上面的CSSGrid布局例子中，需要设置justify-self:start;在导航栏上并自我证明：结束；在按钮上，但如果你使用Flexbox，导航间距将变得容易设置。.header{网格列：1/4;网格行：1/2；颜色：#9f9c9c；文本转换：大写；border-bottom:2pxsolid#b0e0ea;填充：20px0；显示：弹性；内容：空格；align-items:center;}列内容网格将所需元素排列在一个方向上，意味着所有元素都在同一水平维度上，通常Flexbox是实现这种布局的更好选择。此外，Flexbox可以动态调整元素的大小。使用Flexbox，您可以将所有元素连接成一条直线，这也确保了所有元素具有相同的高度。带有文本和按钮的行内容下面是包含“额外”文本和按钮的三个区域。Flexbox可以很容易地设置三列的宽度。.extra{网格列：2/4;网格行：4/5；填充：1rem；显示：弹性；弹性包装：包装；边框：1px实心#ececec；justify-content:space-between;}design方法总结在上面的布局设计中，CSSGrid用于整体布局（以及设计的非线性部分）。对于网格内容区域的设计，使用Flexbox进行样式的排序和微调更容易。