一个好的布局会让用户停留在一个网站上，因为它使重要的东西更容易访问和直观地查找。糟糕的布局让用户感到沮丧，他们离开是因为找不到他们要找的东西。
在网页设计中，布局是一个解释网站如何在屏幕上显示的术语。HTML5有相当多的元素来定义网页的各个部分：页眉、导航、节、旁注、文章和页脚是创建布局的重要区别。它们构成了网页的四个主要部分-页眉/横幅、导航、内容和页脚。编程语言让网站感觉很有活力，但在每个网页的核心都站着古老的HTML。当我们讨论布局时，我们必须考虑构成良好布局的因素：响应性、查看端口、显示设备、浏览器和用户的屏幕大小。一个好的布局不仅看起来很棒，而且可以通过适应每一种可能的显示比例来保留最初的意图。此校正是通过CSS生成的。在本文中，我们将研究两个强大的属性：CSS Flexbox和CSS Grid。
Flexible Box Module，通常简称为“Flexbox”，是一维布局模型。这意味着它一次只能处理行或列，而不能同时处理行和列。Flexbox在对齐、分布和定向页面中的元素时非常有效。Flexbox中的两个关键术语是主轴和十字轴。柔性容器的主轴是沿其布置这些柔性物品的主轴，横轴垂直于它。首先，我们将HTML div包装在弹性包装器中。
在CSS中，我们的父容器flex-wrapper将被转换为只需一行代码的FlexBox。
我将添加一些具有鲜艳颜色和边距的元素和属性，以使我们的容器和div脱颖而出。
.flex-wrapper{display：flex；back-color：beige；}.flex-wrapper>；div{背景色：绿色；高度：100px；宽度：100px；边距：10px；}。
您可以看到div元素在水平方向上的位置有多好。但是如果你注意到，它不会完全占据容器内的所有空间。末尾有个空隙。我们可以通过添加flex-growth来改变这一点。
Flex-growth元素将每个项目分布在一个flex容器中。缺省值为0，通过为任何div分配一个单元号，您可以使它比其他div增长得更大。与此相对的是弹性收缩。
#one{flex-growth：10；}/*这使第一个div比其他div多10个单位*/。
伸缩方向控制伸缩容器中的项目应该朝向的方向。您可以让div向上、向下、向左和向右移动。您也可以按相反的顺序使用它们。默认情况下，弹性容器中的项目在主轴内从左到右水平排序。
.flex-wrapper{DISPLAY：FLEX；FLEX-DIRECTION：ROW；/*默认方向*/}.flex-Wrapper{DISPLAY：FLEX；FLEX-DIRESS：ROW-REVERSE；}。
在这里，项目从左到右显示，但顺序相反。第四个div现在变成了第一个和第一个-最后一个。
Div垂直排列，但反向排列，其中第四个div在顶部，第一个div在底部。
Flex basic定义了flex容器内的项或div的大小。该大小值可以是em、px或百分比。Flex-BASE与Flex-Growth不同，因为它不平等地共享容器中的项之间的空间。
Flex是结合了Flex-Shink、Flex-Growth和Flex-Basis的速记属性。建议您使用此属性，而不是编写每个单独的属性及其值。设置属性值的顺序如下：Flex-Growth、Flex-Shink、Flex-Basis。
JUSTIFY-CONTENT和ALIGN-Self是使用FlexBox将div或容器集中在浏览器上的完美解决方案。
CSS网格是一个强大的二维布局。这意味着它可以处理布局的行和列。CSS网格使用12网格排列，其中屏幕(不可见地)被分成12个部分，项目必须适合这种排列。CSS网格相对于FlexBox和其他布局模型的优势在于它的二维质量。它还使定位更加直观，并且可以将容器的元素设置为相互重叠和重叠。
<；div class="；容器"；>；<；div id="；one"；>；Header<；/div>；<；div id="；两>；Nav<；/div>；<；div id="；Three"；>；content<；/div>；<；div id="；Four"；<；side<；/div>；<；Div id="；Five"；>；Section<；/div>；<；div id="；Six"；>；footer<；/div>；<；/div>；
GRID-TEMPLATE-COLUMNS和GRID-TEMPLATE-ROW定义列或行的大小。它根据分配的内容为div分配大小。设置模板列大小和模板网格大小时，可以使用px、fr、percentage或em。
.tainer{显示：网格；网格模板-列：40px 1FR 20%；网格-模板-行：200px；背景颜色：米色；}.tainer>；div{背景颜色：绿色；页边距：10px；}。
40px 1FR 20%；-该行代码告诉浏览器将第一个div的宽度指定为40px。第二个占用分配空间的一小部分，第三个占用20%。自动地，div4到6移到前3下面，并采用相同顺序分配的值。这意味着div4分配了40px，div5分配了一个分数，div6分配了20%。要将所有六个div放在一行上，我们必须将六个值赋给grid-template-column。我们不必对网格柱进行不同的测量。我们只能使用百分比、fr或px。200px；-这会将所有div的高度指定为200px；
通过在6个位置分配16.7%，我已经成功地在屏幕上将容器中的6个div划分为6个相等的部分。我用的是16.7，因为16.7乘以6得到了100%的屏幕宽度。使用Percent和px可以完美地工作，但是它缺乏足够的灵活性，并且掩盖了最有用的资源-CSS网格的一小部分。FR是一个分数单位。它为每个项目分配可用空间的一小部分。根据每个div所需的空间大小，可以增加分数空间以容纳每个div。我们的栅格模板柱现在变成。
这个新值使第二个和第四个div的大小是其余div的两倍。最重要的是，它仍然均匀地分布在浏览器上，并且响应非常灵敏。
我们可以利用Repeat函数来赋值一次，而不是重复写入值。
语法相对简单。我们需要使用单词“repeat”，然后指定要重复大小的次数，即6次，然后给出测量值。此重复函数适用于fr、em、px和百分比。这也适用于模板行。
间距，也称为栏间距，是一个CSS网格属性，允许您在CSS网格容器中指定div之间的间距。它的工作原理与边际属性相同，主要以px计算。
轴网柱起点和轴网柱终点通过引用特定轴线将轴网项目放置在柱内的特定位置。GRID-ROW-START和GRID-ROW-END也对该行执行相同的操作。通过为该属性赋值，可以方便地操作网格项目以在指定区域内开始和结束。
.CONTAINER{DISPLAY：GRID；GRID-TEMPLATE-COLUMNS：REPEAT(3，1FR)；GRID-TEMPLATE-ROWS：REPEAT(4,200px)；}#One{Grid-Column-Start：1；Grid-Column-End：3；Grid-Row-Start：1；Grid-Row-End：4；}。
当您将这些值分配给第一个div时，您会注意到它将第二个div推到一个单位之外，并且它占据了前两个位置，并将下面的div 3推入。就行而言，它现在占据了三个位置，这使它的高度更高。在编程中编制索引时有一条规则，因为我们通常从0开始计数，这适用于这里。最后一个值通常会被提及，但不会付诸实施。例如，网格列末端是3，但它在2处停止，就像网格行末端一样，它在3处结束，而不是在4处结束。
间距，也称为栏间距，是一个CSS网格属性，允许您在CSS网格容器中指定div之间的间距。它的工作原理与边际属性相同，主要以px计算。
CSS网格是创建图库的完美模型。只需很少的代码和操作，您就可以做出完美的、响应迅速的图库布局。
<；div class="；CONTAINER"；>；div id="；one"；>；Image one<；/div>；<；div id="；Two"；>；Image Two<；/div>；<；div id="；Three"；>；Image Three<；/div>；<；div id="；Four"；>；Image Four<；/div>；<；div id="；五"；>；图像五<；/div&>；<；div id="；六"；>；图像六<；/div>；<；div id="；七"；>；图像七<；/div&>；<；div="；八"；>；图像八<；/div>；<；div；id="；九"；<；Image 9<；/div>；<；/div>；
.tainer{Display：Grid；Grid-Template-Columns：Repeat(3，1fr)；Grid-Template-Rows：Repeat(3,200px)；Background-Color：beige；Gap：10px}.tainer>；div{back-color：green；}。
此布局不均匀，因为它没有固定的行高。使用网格列和网格行，我们可以调整图像以适应指定的分数单位，并根据需要在指定的分数单位之间移动。
.tainer{显示：网格；网格模板-列：Repeat(3，1fr)；网格模板-行：Repeat(5,200px)；背景颜色：米色；间隙：10px；}.tainer>；div{背景颜色：绿色；}#一{网格列：1/3；网格行：1/4；}#两{网格行：1/3；}#五{网格列：4/2；}#七{网格行：6/1；}。
GRID-TEMPLATE-AREA为div/元素指定一个名称，以便GRID-Area属性可以引用它。它的工作方式就像网格列和网格行一样，允许在网格结构中轻松地映射和调整某些区域。
.tainer{显示：网格；网格模板-列：Repeat(3，1fr)；网格模板-行：Repeat(2,100px)；背景颜色：米色；间隙：10px；网格模板-区域：'；页眉页眉'；'；导航'；'；旁注内容'；'；旁注内容'；'；页脚注脚'；；}.CONTAINER>；div{背景颜色：绿色；字体大小：40px；}#一{网格区：页眉；}#二{网格区：导航；}#三{网格区：旁注；}#四{网格区：内容；}#五{网格区：节；}#六{网格区：页脚；}。
引用命名区域必须按照它们被调用的顺序进行。例如，#One的网格区域不能是页脚，因为这是最后命名的网格区域。不遵守订单将在设计中引起错误。
简而言之，网格是基于容器的布局，而Flexbox是基于内容的布局。CSS Grid和Flexbox的功能都很强大，尽管CSS Grid封装了更多功能，使得在网格中操作行和列变得更容易。在决定选择哪一个之前，先了解你要建立的网站的复杂性、结构和内容。下面进行更深入的比较：在FlexBox布局中，单元格(弹性项)的大小是在弹性项本身中定义的，而在网格布局中，单元格(网格项)的大小是在网格容器中定义的。
不过，我建议您使用CSS Grid作为站点的整体布局，然后使用Flexbox来放置容器的项目。CSS Grid还可以完美地处理单个项目，而且它比Flexbox更能适应实际网格结构中的细微差别。例如，网格模板区域将在几秒钟内绘制出网站的结构，您可以根据自己认为合适的方式将重点放在对齐内容上。