css 网格布局_CSS网格布局

css 网格布局

网格布局 (Grid Layout)

CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is supported by all major browsers and provides a way to position items on the page and move them around.

CSS网格布局，简称为Grid，是CSS中最新，功能最强大的布局方案。所有主要浏览器均支持该功能，并提供了一种在页面上定位项目并在其中移动项目的方法。

It can automatically assign items to areas, size and resize them, take care of creating columns and rows based on a pattern you define, and doing all the calculations using the newly introduced fr unit.

它可以自动将项目分配给区域，调整大小并调整它们的大小，并根据您定义的模式创建列和行，并使用新引入的fr单位进行所有计算。

为什么选择网格？ (Why Grid?)

You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)

您可以轻松地使用一行CSS来组成一个12列的网格。 grid-template-columns: repeat(12, 1fr)
Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - not both at the same time, Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.

网格使您可以向任何方向移动事物。与Flex不同，您可以在其中水平( flex-direction: row )或垂直( flex-direction: column )(而不是同时)移动项目，而Grid则可以将任何网格项目移动到页面上的任何预定义网格区域 。您移动的项目不必相邻。
With CSS Grid, you can change the order of HTML elements using only CSS. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the <div> from <footer> to <aside> in the HTML, you can just change it’s placement with grid-area in the CSS stylesheet.

使用CSS Grid，您可以仅使用CSS更改HTML元素的顺序 。从顶部向右移动某些内容，将页脚中的元素移动至侧边栏等。代替将<div>从<footer>移至<aside> ，而只需在HTML中使用grid-area更改其位置即可。 CSS样式表。

网格与Flex (Grid vs. Flex)

Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planesFlex是一维的-水平或垂直，而Grid是二维的，这意味着您可以在水平和垂直平面中移动元素
In Grid, we apply layout styles to the parent container and not the items. Flex on the other hand targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink

在Grid中，我们将布局样式应用于父容器而不是项目。另一方面，Flex以flex项目为目标，以设置诸如flex-basis ， flex-grow和flex-shrink属性
Grid and Flex are not mutually exclusive. You can use both on the same project.网格和Flex并不互斥。您可以在同一项目中使用它们。

使用`@supports`检查浏览器兼容性 (Checking browser compatibility with `@supports`)

Ideally, when you build a site, you’d design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the @support CSS rule (aka feature query). Here’s an example:

理想情况下，构建网站时，可以使用Grid进行设计，并使用Flex作为后备。您可以使用@support CSS规则(也称为功能查询)来确定浏览器是否支持网格。这是一个例子：

.container {display: grid; /* display grid by default */
}@supports not (display: grid) { /* if grid is not supported by the browser */.container {display: flex; /* display flex instead of grid */}
}

入门 (Getting Started)

To make any element a grid, you need to assign its display property to grid, like so:

要使任何元素成为网格，您需要将其display属性分配给grid ，如下所示：

.conatiner {display: grid;
}

And that’s it. You just made your .container a grid. Every element inside the .container automatically becomes a grid item.

就是这样。您只是将.container为网格。 .container每个元素.container自动成为网格项。

定义模板 (Defining templates)

Rows and columns

行和列

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Areas

地区

grid-template-areas: "a a a a""b c d e""b c d e""f f f f";

要么

grid-template-areas:"header header header header""nav main main sidebar";

网格区域 (Grid Areas)

Here’s some sample code on how to define and assign grid areas

这是一些有关如何定义和分配网格区域的示例代码

.site {display: grid;grid-template-areas: /* applied to grid container */"head head" /* you're assigning cells to areas by giving the cells an area name */"nav  main" /* how many values kind of depends on how many cells you have in the grid */"nav  foot";
}.site > header {grid-area: head;
}.site > nav {grid-area: nav;
}.site > main {grid-area: main;
}.site > footer {grid-area: foot;
}

`fr`单位 (The `fr` unit)

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly, plus there will be no bleeding gaps at the end either.

Grid引入了一个新的fr单位，代表分数。使用fr单位的好处是它可以为您计算。使用fr可以避免边距和填充问题。使用%和em等，它成为计算grid-gap时的数学方程。如果使用fr单位，它将自动计算色谱柱和装订线的大小，并相应地调整色谱柱的大小，而且最后也不会出现渗漏间隙。

例子 (Examples)

根据屏幕大小更改元素的顺序 (Changing the order of elements based on screen size)

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

假设您要将页脚在小屏幕上移至底部，在大屏幕上移至右侧，并且在这两者之间还有许多其他HTML元素。

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

简单的解决方案是根据屏幕尺寸更改grid-template-areas 。您也可以根据屏幕尺寸更改列数和行数 。这是Bootstrap网格系统( col-xs-8 col-sm-6 col-md-4 col-lg-3 )的一种更干净，更简单的替代方法。

.site {display: grid;grid-template-columns: 1fr 1fr;grid-template-areas:"title title""main header""main sidebar"
}@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */.site {grid-template-columns: 2fr 1fr 1fr;grid-template-areas:"title title title""main header header""main sidebar footer"}
}

See the Pen CSS Grid by example - 2 (grid areas + grid gap) by Aamnah Akram (@aamnah) on CodePen.

请参见CodePen上的Aamnah Akram( @aamnah ) 编写的Pen CSS网格示例-2(网格区域+网格间隙) 。

翻译自: https://www.freecodecamp.org/news/css-grid-layout/

css 网格布局