CSSGrid简介
时间：2023-03-30 23:30:02
CSS
CSSGrid（CSS网格）是继Flexbox之后另一种非常重要的布局方式。目前，最新版本的ChromeFirefoxSafari浏览器已经开始支持它。在本文中，我们通过实现具有以下布局的照片墙示例来学习CSSGrid。先说：FlexBox和CSSGrid的区别？Flexbox是一维的，CSSGrid是二维的。想一想，在使用Flexbox的时候，需要通过定义flex-direction:row|来确定布局方向。柱子。CSS网格可以按行和列排列。效果分析首先我们来分析一下最终的效果。我们把Bootstrap的grid系统移到了头上，可以看到它是由4行4列组成的：效果实现首先，和Flexbox一样，我们需要定义一个Grid容器，通过display:grid来使用grid布局方式宣言。定义列接下来，我们需要声明列。使用grid-template-columns属性，具有4列的网格系统，每列200px，按以下方式定义。网格模板列：200px200px200px200px；更简单的写法是：grid-template-columns:repeat(4,200px);如果你不想定义具体的值，而是希望每列的宽度为一行如果你想定义长度的比例，你可以使用Grid新引入的fr单位。fr是fraction（分数）的意思，也就是说你定义的是分子，你定义的所有东西加起来就是分母。比如整行900px，1fr2fr表示第一列占1/3，第二列占2/3。在我们的渲染中，我们可以看到4列平均划分一行的宽度，因此我们可以这样定义它：grid-template-columns:repeat(4,1fr);你还想在行和列之间添加一些间距（Gutters），使用grid-gap属性：grid-gap:0.5rem;目前，我们的布局是这样的：.grid-container{display:grid;网格模板列：重复（4、1fr）；grid-gap:0.5rem;1
2
3
4
5
6
定义一行，当一行写满时自动切换到下一行。除非特别需要，否则不必定义它。但是就像我们需要在这里定义每一行的高度。定义行的方式也和上面说的定义列的方式类似，使用grid-template-rows来定义：grid-template-rows:repeat(4,150px);有一点比较尴尬的是我们经常不知道每一块内容的内容是多少，有时候内容的高度会溢出定义的高度，不过不用担心，可以使用minmax(min,max)使高度更灵活。grid-template-rows:repeat(4,minmax(150px,auto));跨行和列，我们已经定义了网格系统的行和列。在我们的效果图中，我们看到有些元素占据了不止一行或一列，我们可以通过为每个元素（网格项）的开始和结束位置设置grid-column-start、grid-column-end来定义每个元素。灰色背景的数字代表列。例如，如果你希望你的第一个元素跨越两列，那么这个元素从1开始，跨越两列，并在3结束：grid-column-start:1;网格列端：3；这么写，如果是后面的元素，不容易算出它的起始位置，可以用更现代的写法。通过span（扩展）关键字，它意味着从该元素应该开始的地方扩展几列。网格列开始：跨度2；cross-row的写法也是一样的，只是通过grid-row-start定义的。最后，为每个元素定义它应该占据的行和列：.grid-container{display:grid;网格模板列：重复（4、1fr）；grid-template-rows:repeat(4,minmax(150px,auto));网格间隙：.5rem；}.box-1{grid-column-start:span2;网格行开始：跨度2；}.box-2{grid-column-start:span2;}.box-4{grid-row-start:span3;}.box-5{grid-row-start:span2;}.box-6{grid-column-start:span2;网格行开始：跨度2；最后，将您最喜欢的背景图片添加到您的元素中！！[参考]：网格实例
