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