回到见解

5分钟阅读

CSS网格简介

作者: 瑞安·科菲尔德(Ryan Corfield)
发表于 Web开发 2020年2月3日上午12:00

多年来,网站一直在使用基于网格的设计。不幸的是’由于两种HTML的局限性,所以从来都不是实际创建这些设计的好方法& CSS.

过去,我们必须使用HTML表格(刚性,无响应且通常很糟糕),CSS Floats(无响应且基本上已损坏,需要使用clearfix hack才能正常工作)。

Flexbox的推出是向前迈出的一大步。响应迅速且功能强大的布局模块,使对象布局的控制变得更加容易。但是,在考虑完整的网站模板时,仍不完全适合目的。 Flexbox仅允许您控制内容流的一个维度。

CSS Grid是模板设计的更好解决方案。允许您在响应的同时水平和垂直地控制每个元素的流动,元素的大小,元素之间的间隔。

那么什么是CSS Grid?

CSS网格布局(CSS Grid)于2016年推出,并于2017年得到大多数主流浏览器的正式支持,是一种创建复杂的多维布局的强大新方法。

CSS Grid是一个基于网格的布局系统,它使您可以轻松地创建行模板和列模板结合使用的页面模板和布局。’不能依靠定位或浮动。它与HTML Tables的功能相对相似,但更加灵活。

开始之前:

CSS网格不是’成为前端开发解决方案的全部和全部。

CSS网格为 不是 在IE 11或IE 10的支持下,您仍然需要提供IE修复程序和回退。完整的CSS Grid布局,例如我的示例’直到您可以确定几乎没有用户正在使用较旧的浏览器,才真正可能要经历这些。

Flexbox也不是过时的。尽管CSS Grid从技术上可以做Flexbox可以做的一切,但它们是解决2个不同问题的解决方案,当您只需要一行均匀分布的图像时,您会发现CSS Grid是不必要的工具。

基础

Grid works similarly to Flex. When you set an element to display:grid all immediate child elements become a grid element and will respond to the properties you set.

网格使用行和列的组合来构建模板。

grid-template-columns controls the columns, and grid-template-rows controls the rows. With these new CSS properties we set the size and number of columns/rows we want to have.

这是一个非常简单的示例,其中3×3 grid. I’ve将网格设置为显示3个相等的列和行。

If we want to have an equal size for all columns and/or rows instead of laboriously typing out the same thing 12 times can use the repeat() shorthand. grid-template-columns:repeat(3, 1fr);.

The fr unit is a new CSS unit used with grid, which means that cell should use part of the available space. 1fr means to use 1 part of the available space. We can use it in combination with other units such as px, rem or %. The great thing about the fr unit is that no matter how many rows or columns we decide to use, the correct size will always be calculated to fit in our grid, so we could have 5, 10 or 20 columns and fr will always fit exactly.

In the following example, we have set the columns to be 35%, 40px and 1fr. This means the first column of the grid will be 35% of the container width, 40px explicitly, and the final column will fill whatever space is left. You can also set multiple fr units. so for example grid-template-columns:5fr 2fr 1fr will set the first column to fill 5 parts of the space, the second to 2 parts of the space and the final to one part of the space.

grid-column-gap and grid-row-gap are fairly self explanatory, theu set the spacing between each column and row, but keeps the spacing within the grid only. So no more messing around with negative margins and black magic to get your container to line up with everything.

网格模板:

Grid Templates define a template which is set by using specific grid areas to create a layout. With grid-template-areas we can create complex layouts for our page.

这里’是基本博客文章布局的示例。使用网格创建。

We begin by create our rows and columns in the same way above. Defining how many rows and columns our layout should have. Define our grid areas using grid-area in our child elements, and then organise grid areas in grid-template-areas

网格模板区域将与设置的列和行相对应。

grid-template-areas:
"header header header"
"文章 article sidebar"
"related-1 related-2 ."
"footer footer footer";

Each string of text creates a row, and each set grid area creates a column. grid-template-areas must correspond with your defined columns and rows. So a row must have the same number of columns as declared in grid-template-column. Each cell you declare with a grid-area will be filled with that area. So on first row of the template where declared "header header header" the header grid area will fill the width off 3 columns. A full stop ("related-1 related-2 .") means to leave a gap.

然后’s basic usage. You can do a lot more with CSS Grid to make super powerful and flexible layouts with the various functions available to use such as minmax(). The helpful folks at CSS技巧 已经为CSS Grid和可信赖的工具创建了相当全面的指南 Mozilla网络文档 提供您所需的一切,以全面了解所有工作原理。

您如何看待这篇文章?

爱它

有趣

不适合我

做什么 [你] want to do next?

阅读更多博客。

看我们的工作。