css网格_我如何记住CSS网格属性

css网格

The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid.

CSS Grid的语法是外来的，很难记住。但是，如果您不记得CSS Grid的语法，那么使用CSS Grid时就不会充满信心。

To wield CSS Grid effectively, you need to remember its properties and values.

为了有效地使用CSS Grid，您需要记住其属性和值。

I want to share how I remember the most common CSS Grid properties today. This will help you use CSS Grid without googling like a maniac.

我想分享我如何记住当今最常见CSS Grid属性。这将帮助您使用CSS Grid，而不会像疯子一样进行谷歌搜索。

属性组 (Groups of properties)

I remember CSS Grid according to four groups of properties:

我记得CSS Grid根据四组属性：

The explicit grid
显式网格
Gaps
缝隙
Aligning things
对齐事物
The implicit grid
隐式网格

显式网格 (The explicit grid)

Let’s say you want to make a grid with 4 columns and 3 rows. You say this 4 columns and 3 rows out loud. It’s explicit.

假设您要制作一个4列3行的网格。您说这4列和3行很大声。很明显

If you declare the number of rows and columns in your grid, the grid is explicit.

如果声明网格中的行数和列数，则网格是显式的。

You can use two properties to make an explicit grid:

您可以使用两个属性来创建显式网格：

grid-template-columns
grid-template-columns
grid-template-rows
grid-template-rows

grid-template-columns lets you define the number of columns. grid-template-rows lets you define the number of rows.

grid-template-columns可让您定义列数。 grid-template-rows使您可以定义行数。

.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 3em 3em 3em;}

This creates a grid with four columns and three rows.

这将创建一个具有四列三行的网格。

See the Pen XPyGZp by Zell Liew (@zellwk) on CodePen.

请参阅CodePen上的Zell Liew( @zellwk )的Pen XPyGZp 。

How do you know there are four columns and three rows?

您怎么知道有四列三行？

grid-template-columns create a new column for each length value you add to it. In the grid-template-columns declaration above, we have four 1fr values. This means four columns.

grid-template-columns为您添加到其中的每个长度值创建一个新列。在上面的grid-template-columns声明中，我们有四个1fr值。这意味着四列。

grid-template-rows work the same way. The grid above has three 3em values, which means it has 3 rows.

grid-template-rows以相同的方式工作。上面的网格具有三个3em值，这意味着它具有3行。

grid-template-columns and grid-template-rows can also take in values like repeat, autofill, autofit, minmax. We won’t go into these values in this article.

grid-template-columns和grid-template-rows也可以采用repeat ， autofill ， autofit ， minmax 。在本文中，我们将不讨论这些值。

What you need to know now is you can create an explicit grid with two properties:

您现在需要知道的是可以创建具有两个属性的显式网格：

grid-template-columns: creates columns
grid-template-columns ：创建列
grid-template-rows: creates rows
grid-template-rows ：创建行

在网格中定位项目 (Positioning items in your grid)

You can control the position of items in a grid with two properties.

您可以使用两个属性控制项目在网格中的位置。

These two properties can only be used on a grid item.

这两个属性只能在网格项目上使用。

grid-column lets you choose which column(s) you want to place your grid item. It is a shorthand for grid-column-start and grid-column-end.

grid-column可让您选择要放置网格项的列。它是grid-column-start和grid-column-end的简写。

It works this way: grid-column-start / grid-columns-end.

它是这样工作的： grid-column-start / grid-columns-end 。

/* Using the longhand */.grid-item {  grid-column-start: 1;   grid-column-end: 3;}

/* Using the shorthand */.grid-item {  grid-column: 1 / 3;}

Note: You can also use the span keyword to tell CSS Grid how many columns you want your item to take up.

注意：您也可以使用span关键字告诉CSS Grid您希望项目占用多少列。

/* Using the longhand */.grid-item {  grid-column-start: 1; /* Start at column one */  grid-column-end: span 2; /* Width is two columns */}

See the Pen Explicit Grid properties by Zell Liew (@zellwk) on CodePen.

见钢笔明确网格属性由泽尔与Liew( @zellwk )上CodePen 。

grid-row lets you choose which row(s) you want to place your grid item. It is a shorthand for grid-row-start and grid-row-end.

grid-row使您可以选择要放置网格项目的行。它是grid-row-start和grid-row-end的简写。

It works this way: grid-row-start / grid-row-end.

它是这样工作的： grid-row-start / grid-row-end 。

/* Using the longhand */.grid-item {  grid-row-start: 1;   grid-row-end: span 2;}

/* Using the shorthand */.grid-item {  grid-row: 1 / span 2;}

See the Pen Positioning items (rows) by Zell Liew (@zellwk) on CodePen.

见笔定位件(行)由泽尔与Liew( @zellwk )上CodePen 。

在命名区域中定位项目 (Positioning items in named areas)

You can name parts of your grid if you don’t like counting rows and columns. These named parts are called grid areas. To create a grid area, you use grid-template-area on the grid.

如果您不喜欢计算行和列，则可以命名网格的各个部分。这些命名的部分称为网格区域。要创建网格区域，请在网格上使用grid-template-area 。

Some notes on creating grid areas:

有关创建网格区域的一些说明：

You must name every grid area
您必须命名每个网格区域
If you don’t want to name an area, use .
如果您不想命名区域，请使用.
Each group separated by inverted commas ("row1" "row2") signifies a row
每个组用逗号分隔( "row1" "row2" )，表示一行
Each value within inverted commas ("area1 area2") signifies an area
逗号内的每个值( "area1 area2" )表示一个区域

The example below has three grid areas:

下面的示例包含三个网格区域：

header on the first two and takes up 4 columns
前两个header ，占4列
main on the second row and takes up the middle 2 columns
main在第二行，占据中间的两列
footer on the third row and takes up 4 columns
第三行的footer ，占据4列

.grid {  grid-template-areas: "header header header header"                      ".      main   main   .     "                      "footer footer footer footer";}

To place items in a grid area, you use the grid-area property on the grid item.

要将项目放置在网格区域中，请在网格项目上使用grid-area属性。

To place items on a grid-area, you use grid-area.

要将项目放置在网格区域上，请使用grid-area 。

.grid {  display: grid;   /* ... */}

main {  grid-area: main}

See the Pen Grid-template-area by Zell Liew (@zellwk) on CodePen.

见笔网格模板面积由泽尔与Liew( @zellwk )上CodePen 。

如何记住这些属性 (How to remember these properties)

You learned 6 properties so far:

到目前为止，您已经了解了6个属性：

grid-template-columns
grid-template-columns
grid-template-rows
grid-template-rows
grid-template-areas
grid-template-areas
grid-column
grid-column
grid-row
grid-row
grid-area
grid-area

Some tips to remember these 6 properties:

记住这6个属性的一些技巧：

The template keyword can only be used on the grid
template关键字只能在网格上使用

a) They’re used to declare grids and named areas
a)它们用于声明网格和命名区域

b) Properties with the
b)具有的属性

template keyword are plural
template关键字为复数
Properties for grid items do not have the template keyword
网格项目的属性没有template关键字

a) These properties are singular
a)这些属性是单数

b) These properties affect positioning
b)这些属性影响定位

缝隙 (Gaps)

When you create a grid, you can create spaces between columns and rows. These spaces are called gaps.

创建网格时，可以在列和行之间创建空格。这些空间称为间隙。

There are three properties to remember:

要记住三个属性：

grid-column-gap
grid-column-gap
grid-row-gap
grid-row-gap
grid-gap
grid-gap

grid-column-gap determines the space between columns.

grid-column-gap确定列之间的间隔。

grid-row-gap determines the space between rows.

grid-row-gap确定行之间的空间。

grid-gap is a shorthand for grid-column-gap and grid-row-gap.

grid-gap是grid-column-gap和grid-row-gap的简写。

For this shorthand:

对于此速记：

the column value comes first: column-gap / row-gap
column值排在第一位： column-gap / row-gap
If you use a single number, both values will be that number.
如果使用单个数字，则两个值都将是该数字。

/* Different values */.grid {  grid-column-gap: 1em;  grid-row-gap: 2em;}

.grid {  grid-gap: 1em / 2em; }/* Same values */.grid {  grid-column-gap: 1em;  grid-row-gap: 1em;}

.grid {  grid-gap: 1em;}

See the Pen Explicit Grid with gap by Zell Liew (@zellwk) on CodePen.

见笔与差距显式网格由泽尔与Liew( @zellwk )上CodePen 。

对齐事物 (Aligning things)

This is where many people get confused.

这是许多人感到困惑的地方。

There are six properties to align things:

有六个属性可以使事物对齐：

justify-content
justify-content
align-content
align-content
justify-items
justify-items
align-items
align-items
justify-self
justify-self
align-self
align-self

You can see two groups of patterns here:

您可以在此处看到两组模式：

The first group is justify vs align
第一组是justify与align
The second group is content, items, and self
第二组是content ， items和self

These two groups of properties tell you what you’re dealing with. If you understand the property keyword, you’ll know how to use them.

这两组属性告诉您您要处理的内容。如果您了解property关键字，就会知道如何使用它们。

对齐与对齐 (Justify vs align)

Each CSS Grid has two axes:

每个CSS网格都有两个轴：

The main-axis
主轴
The cross-axis
横轴

When you justify something, you’re changing the alignment according to the main-axis. When you align something, you’re changing the alignment according to the cross-axis.

当你justify什么，你根据主轴改变对齐。 align某物时，您正在根据横轴更改对齐方式。

Here’s an easy way to identify the main and cross axis:

这是识别主轴和交叉轴的简单方法：

Identify the direction of the language
确定语言的方向
Main-axis is the way you read the language
主轴是您阅读语言的方式
Cross-axis is the way you read after you read the end of the first line.
横轴是您阅读第一行结尾后的阅读方式。

Let’s take English as an example. How do you read English?

让我们以英语为例。您如何阅读英语？

Left to right
左到右
Top to bottom
从上到下

So the main and cross axis is:

因此主轴和交叉轴为：

Main: left to right
主：从左到右
Cross: top to bottom
十字：从上到下

Note: the main and cross axes change if you change the language direction with writing-mode.

注意：如果您使用writing-mode更改语言方向，则主轴和十字轴也会改变。

内容，项目和自我 (Content, items, and self)

justify-content and align-content lets you align the grid itself to the available space outside of the grid. You will only need these properties if your grid is smaller than its defined area (which is rare).

justify-content和align-content允许您将网格本身与网格外部的可用空间对齐。仅当网格小于其定义的区域(很少见)时，才需要这些属性。

.grid {  justify-content: /* some value */;   align-content: /* some value */; }

You can pick from seven values:

您可以从七个值中进行选择：

start: flush grid to the start of the axis
start ：将网格刷新到轴的起点
end: flushed grid to the end of the axis
end ：冲洗网格到轴的末端
center: align grid to the center of the axis
center ：将网格与轴中心对齐
stretch: grid fills the axis (this is the default value)
Stretch ：网格填充轴(这是默认值)
space-between: spreads whitespace between grid items. No whitespace at the ends
space-between ：在网格项目之间扩展空格。末尾没有空格
space-around: spreads whitespace around each grid item
空格：在每个网格项周围分布空白
space-evenly: spreads whitespace evenly around all grid items including the ends
均匀空间 ：在所有网格项目(包括末端)周围均匀地分布空白

The pictures above are taken from CSS Tricks’s A complete Guide to Grid. It explains what each value does in detail. You can read it for more information.

上面的图片摘自CSS Tricks的《网格的完整指南》。它详细解释了每个值的作用。您可以阅读以获取更多信息。

Our focus here is remembering the properties and how to use them. Let’s get back on track with the next set of properties.

我们在这里的重点是记住这些属性以及如何使用它们。让我们回到下一组属性上。

justify-items and align-items lets you align grid-items to any available whitespace in their respective cells. Most of the time, when you’re trying to align things, you’re looking for either justify-items or align-items.

justify-items和align-items使您可以将网格项与它们各自单元格中的任何可用空格对齐。在大多数情况下，当您尝试对齐内容时，您会寻找justify-items或align-items 。

.grid {  justify-items: /* some value */;   align-items: /* some value */; }

You can pick from the same four values:

您可以从相同的四个值中进行选择：

start: flush item to the start of the axis
start ：将项目冲洗到轴的起点
end: flush item to the end of the axis
end ：将项目冲洗到轴的末端
center: align item to the center of the axis
中心：将项目与轴中心对齐
stretch: fills the axis (this is the default value)
Stretch ：填充轴(这是默认值)

justify-self and align-self does the same thing as justify-items and align-items. The difference is it lets you change the alignment for only one grid-item.

justify-self和align-self与justify-items和align-items 。不同之处在于，它仅允许您更改一个网格项目的对齐方式。

.grid-item {  justify-self: /* some value */;  align-self: /* some value */;}

隐式网格 (Implicit Grid)

Let’s say you created a CSS Grid, but you don’t have enough rows. In this example below, I only created an explicit grid for three items (3 columns, 1 row).

假设您创建了一个CSS网格，但是没有足够的行。在下面的示例中，我仅为三个项目(3列1行)创建了一个显式网格。

.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr;  grid-template-row: 3em;}

But I have six items!

但是我有六个项目！

<!-- This is HTML -->

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

When you don’t have enough space in your explicit grid, CSS Grid will help you create additional grids automatically. By default, it’ll create more rows.

当您的显式网格中没有足够的空间时，CSS Grid将帮助您自动创建其他网格。默认情况下，它将创建更多行。

If you want to switch the grid direction, you’ll set grid-auto-flow to row.

如果要切换网格方向，则将grid-auto-flow为row 。

This automatically created parts are called the implicit grid.

自动创建的零件称为隐式网格。

You can adjust the automatically created column(s) or row(s) with these two properties:

您可以使用以下两个属性来调整自动创建的列或行：

grid-auto-columns
grid-auto-columns
grid-auto-rows
grid-auto-rows

.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 3em;   grid-auto-rows: 6em;}

See the Pen Implicit grid by Zell Liew (@zellwk) on CodePen.

见笔隐格由泽尔与Liew( @zellwk )上CodePen 。

如何记住隐式网格 (How to remember the implicit grid)

auto is the keyword you want to watch out for.

auto是您要注意的关键字。

template creates the explicit grid
template创建显式网格
auto creates the implicit grid
auto创建隐式网格

I use the implicit grid a lot. I’ll share how I use CSS Grid in another article.

我经常使用隐式网格。在另一篇文章中，我将分享如何使用CSS Grid。

结语 (Wrapping up)

That’s almost every CSS Grid property you need to know for 80% of your grids! Here’s a summary of the properties you learned:

这几乎是您80％的网格都需要知道的每个CSS Grid属性！这是您了解的属性的摘要：

Creating a grid
创建网格

a. Explicit:
一个。显式：

1)
1)

grid-template-columns
grid-template-columns

2)
2)

grid-template-rows
grid-template-rows

3)
3)

grid-template-areas
grid-template-areas

b. Implicit:
b。隐式：

1)
1)

grid-auto-columns
grid-auto-columns

2)
2)

grid-auto-rows
grid-auto-rows
Gaps
缝隙

1)
1)

grid-column-gap
grid-column-gap

2)
2)

grid-row-gap
grid-row-gap

3)
3)

grid-gap
grid-gap
Positioning items in a grid
在网格中定位项目

1)
1)

grid-column
grid-column

2)
2)

grid-row
grid-row
Aligning things
对齐事物

1)
1)

justify-content
justify-content

2)
2)

align-content
align-content

3)
3)

justify-items
justify-items

4)
4)

align-items
align-items

5)
5)

justify-self
justify-self

6)
6)

align-self
align-self