css网格_CSS网格的全面概述

css网格

Positioning elements on your page in CSS can often cause headaches. I have recently taken the time to study CSS Flexbox and Grid in depth and feel that given 15 minutes or so of research, anyone can learn to position items on their page with ease. The great thing about CSS Grid too is that it is a great tool for media queries in order to make your site responsive. You can easily decide to show four elements in columns next to each other on a large screen, reduce is to two on a smaller screen or tablet and then take it down to one on a mobile device. Specifying column numbers is super easier and with one line in each media query, you can really improve the responsiveness of a section of your application.

使用CSS在页面上定位元素通常会引起头痛。 我最近花了一些时间来深入研究CSS Flexbox和Grid，并认为经过15分钟左右的研究，任何人都可以轻松地学会在页面上放置项目。 CSS Grid的优点还在于，它是用于媒体查询的出色工具，可以使您的网站具有响应能力。 您可以轻松地决定在大屏幕上以相邻的列显示四个元素，在小屏幕或平板电脑上减少为两个，然后在移动设备上将其减少为一个。 指定列号超级容易，并且每个媒体查询中只有一行，您确实可以提高应用程序部分的响应速度。

The thing that makes CSS Grid Layout so powerful is that it is a 2-dimensional system. Unlike flexbox which is mainly 1-dimensional and often requires several layers of nesting to creating a grid like layout, in CSS Grid you simply apply styles to one parent element (known commonly as the Grid Container) and then all the containers children (Grid Items).

使CSS Grid Layout如此强大的原因是它是一个二维系统。 与主要是一维的flexbox不同，flexbox通常需要多层嵌套才能创建类似网格的布局，在CSS Grid中，您只需将样式应用于一个父元素(通常称为Grid Container)，然后将所有容器子元素应用于(Grid Items) )。

To start, create a div and give that div a class of container or grid-container so that you can easily style it:

首先，创建一个div并为该div提供一类容器或网格容器，以便您可以轻松设置其样式：

<div class="grid-container"></div>

The first step in your CSS is to give this div a display style of grid, you can choose between grid (block-level grid) and inline-grid (inline):

CSS的第一步是为该div提供网格的显示样式，您可以在网格(块级网格)和嵌入式网格(嵌入式)之间进行选择：

.grid-container {
    display: grid;
}

This in itself will change nothing on the page, however, it opens the door to applying styling which will organize the elements you choose to nest within your div.

这本身不会更改页面上的任何内容，但是，它为应用样式打开了大门，该样式将组织您选择嵌套在div中的元素。

Let’s say for arguments sake that we added several grid item divs into our container div and we now want to arrange them next to each other in columns of specific sizes. We have quite a few options. We can do this by adding the grid-template-columns CSS property to our grid-container div’s styling:

假设出于参数考虑，我们在容器div中添加了几个网格项div，现在我们要在特定大小的列中将它们并排排列。 我们有很多选择。 我们可以通过在grid-container div的样式中添加grid-template-columns CSS属性来实现：

.grid-container {
    display: grid;
    // Option 1 
    grid-template-columns: 100px 200px auto 300px;
    // Option 2 
    grid-template-columns: 1fr 2fr;
    // Option 3
    grid-template-columns: repeat(4, 100px);
}

Above we can see we have several options when it comes to defining the sizes and number of columns. Option 1 sees us specify in terms of pixels (could be any other unit such as rem to make it more responsive) and add auto in to say that the third column should fit the remaining space. In Option 2 we use the fr unit to set the size of the column to a fraction of the space in the grid container (in the example above column 1 would get 1/3 of the space and column 2 would get 2/3. My personal preference for situations when you know you want evenly sized columns is Option 3 in which we specify the number of columns and their size (again you can use other units such as rem and this would be advised). Naturally there is also a grid-template-rows property for working with rows.

上面我们可以看到定义列的大小和数量时有几个选择。 选项1让我们以像素为单位指定像素(可以是rem等其他单位，以使其更具响应性)，并添加auto表示第三列应适合剩余空间。 在选项2中，我们使用fr单位将列的大小设置为网格容器中空间的一小部分(在上面的示例中，列1将获得1/3的空间，列2将获得2/3。当您知道想要平均列大小的情况时，个人喜好是选项3，其中我们指定了列数及其大小(同样，您可以使用其他单位，例如rem，建议您这样做)。当然，还有一个网格- template-rows属性，用于处理行。

If you wish to set the size of all future rows which may appear as you add elements and they move onto a second row, you can use the grid-auto-rows property in order to specify their height when they are created, you can even give them a value of minmax(min, max).

如果您希望设置所有将来添加元素时出现的行的大小，并将它们移到第二行，则可以使用grid-auto-rows属性来指定创建它们时的高度，甚至可以给他们一个值minmax(min，max)。

While there are several other properties such as grid-row-gap, grid-column-gap and grid-gap which are fairly self explanatory, I want to focus now on the individual styling you can apply to grid items in order to easily state how much of a column/row you wish them to span. First you will obviously need to add some elements to your main container:

虽然还有其他一些属性，例如grid-grow-gap，grid-column-gap和grid-gap可以很容易地说明，但我现在想集中讨论可应用于网格项的各个样式，以便轻松说明您希望它们跨越的大部分列/行。 首先，您显然显然需要在主容器中添加一些元素：

<div class="grid-container">
    <div class="grid-item-1></div> 
    // More div items here
</div>

Then we can begin to style them:

然后，我们可以开始为它们设置样式：

.grid-item-1 { 
    // Option 1 
    grid-column-start : 1;
    grid-column-end : 3;
    // Option 2 
    grid-column: 1/-1;
    // Option 3 
    grid-column: span 2;
}

In Option 1, we state clear start and end values for the span of our particular grid item. We state that we wish for it to start at the very beginning of column 1 and end at the end of column 2. It is important to note that 1 is the start of column 1, 2 the end of column 1 and then each additional number states the end of an extra column. So to span two columns we set the end number to 3, three columns would be 4 etc. In Option 2 we clean things up a little by adding our start and end values in the same property. The start value comes first before the forward slash and the end number comes after. Here we use -1 which states that it should end at the end of the column. Finally, Option 3 shows us that we have the option to just state how many columns our item should span, this is perhaps easier than the slightly confusing nature of the number values we used for grid-column-end. As always, all these properties have row based equivalents.

在选项1中，我们声明了特定网格项目范围的清晰的开始和结束值。 我们声明希望它从第1列的开始处开始，到第2列的结束处结束。重要的是要注意，1是第1列的开始，2是第1列的结束，然后是每个其他数字指出额外一列的结尾。 因此，要跨越两列，我们将结束号设置为3，三列将为4，以此类推。在选项2中，我们通过在同一属性中添加开始值和结束值来进行一些清理。 起始值在正斜杠之前排在首位，结束号在其后。 在这里，我们使用-1表示它应在列的结尾处结束。 最后，选项3向我们展示了我们可以选择声明项目应跨越多少列的选项，这可能比我们用于grid-column-end的数字值稍显混乱的性质容易。 与往常一样，所有这些属性都具有基于行的等效项。

Additionally, you can easily align and justify items and the grid container by using align-content and justify-content when styling the whole grid or align-items and justify-items for individual grid items. You can also use align-self and justify-self within individual grid items if you need to override anything.

此外，在对整个网格或单个网格项目的align-items和justify-item进行样式设置时，可以使用align-content和justify-content轻松对齐和对齐项目以及网格容器。 如果需要覆盖任何内容，也可以在各个网格项目中使用align-self和justify-self。

There are a few other features of the grid system such as grid-template-areas which I highly recommend you look into as people definitely have their own preferences when it comes to using the grid system, however in this blog post I have covered what I have found to be my own preferences when it comes to styling with CSS Grid. If you wish to learn even more about the Grid system, I encourage you to take a look at this article on this incredible CSS Tricks site — https://css-tricks.com/snippets/css/complete-guide-grid/.

网格系统还有其他一些功能，例如网格模板区域，我强烈建议您研究一下，因为人们在使用网格系统时肯定有自己的喜好，但是在本博客中，我介绍了我发现在使用CSS Grid进行样式设置时，这是我自己的偏好。 如果您想进一步了解Grid系统，我鼓励您在这个令人难以置信CSS Tricks网站上查看这篇文章-https: //css-tricks.com/snippets/css/complete-guide-grid/ 。

I hope you have enjoyed this comprehensive look at the most powerful CSS Layout tool and keep an eye out for more coding tips, tutorials and overviews in the future!

希望您对最强大CSS Layout工具有一个全面的了解，并希望将来留意更多的编码技巧，教程和概述！

翻译自: https://levelup.gitconnected.com/css-grid-a-comprehensive-overview-64c7b60bb0d6

css网格