當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時間：2023/11/29 CSS 92 豆豆

生活随笔收集整理的這篇文章主要介紹了 css网格_我如何记住CSS网格属性小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

css網(wǎng)格

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.

我想分享我如何記住當(dāng)今最常見CSS Grid屬性。這將幫助您使用CSS Grid，而不會像瘋子一樣進(jìn)行谷歌搜索。

屬性組 (Groups of properties)

I remember CSS Grid according to four groups of properties:

我記得CSS Grid根據(jù)四組屬性：

The explicit grid

顯式網(wǎng)格

Gaps

縫隙

Aligning things

對齊事物

The implicit grid

隱式網(wǎng)格

顯式網(wǎng)格 (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.

假設(shè)您要制作一個4列3行的網(wǎng)格。您說這4列和3行很大聲。很明顯

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

如果聲明網(wǎng)格中的行數(shù)和列數(shù)，則網(wǎng)格是顯式的。

You can use two properties to make an explicit grid:

您可以使用兩個屬性來創(chuàng)建顯式網(wǎng)格：

grid-template-columns

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可讓您定義列數(shù)。 grid-template-rows使您可以定義行數(shù)。

.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.

這將創(chuàng)建一個具有四列三行的網(wǎng)格。

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為您添加到其中的每個長度值創(chuàng)建一個新列。在上面的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以相同的方式工作。上面的網(wǎng)格具有三個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:

您現(xiàn)在需要知道的是可以創(chuàng)建具有兩個屬性的顯式網(wǎng)格：

grid-template-columns: creates columns

grid-template-columns ：創(chuàng)建列

grid-template-rows: creates rows

grid-template-rows ：創(chuàng)建行

在網(wǎng)格中定位項(xiàng)目 (Positioning items in your grid)

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

您可以使用兩個屬性控制項(xiàng)目在網(wǎng)格中的位置。

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

這兩個屬性只能在網(wǎng)格項(xiàng)目上使用。

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可讓您選擇要放置網(wǎng)格項(xiàng)的列。它是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關(guān)鍵字告訴CSS Grid您希望項(xiàng)目占用多少列。

/* 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.

見鋼筆明確網(wǎng)格屬性由澤爾與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使您可以選擇要放置網(wǎng)格項(xiàng)目的行。它是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 。

在命名區(qū)域中定位項(xiàng)目 (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.

如果您不喜歡計(jì)算行和列，則可以命名網(wǎng)格的各個部分。這些命名的部分稱為網(wǎng)格區(qū)域。要創(chuàng)建網(wǎng)格區(qū)域，請?jiān)诰W(wǎng)格上使用grid-template-area 。

Some notes on creating grid areas:

有關(guān)創(chuàng)建網(wǎng)格區(qū)域的一些說明：

You must name every grid area

您必須命名每個網(wǎng)格區(qū)域

If you don’t want to name an area, use .

如果您不想命名區(qū)域，請使用.

Each group separated by inverted commas ("row1" "row2") signifies a row

每個組用逗號分隔( "row1" "row2" )，表示一行

Each value within inverted commas ("area1 area2") signifies an area

逗號內(nèi)的每個值( "area1 area2" )表示一個區(qū)域

The example below has three grid areas:

下面的示例包含三個網(wǎng)格區(qū)域：

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在第二行，占據(jù)中間的兩列

footer on the third row and takes up 4 columns

第三行的footer ，占據(jù)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.

要將項(xiàng)目放置在網(wǎng)格區(qū)域中，請?jiān)诰W(wǎng)格項(xiàng)目上使用grid-area屬性。

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

要將項(xiàng)目放置在網(wǎng)格區(qū)域上，請使用grid-area 。

.grid { display: grid; /* ... */}main { grid-area: main}

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

見筆網(wǎng)格模板面積由澤爾與Liew( @zellwk )上CodePen 。

如何記住這些屬性 (How to remember these properties)

You learned 6 properties so far:

到目前為止，您已經(jīng)了解了6個屬性：

grid-template-columns

grid-template-rows

grid-template-areas

grid-column

grid-row

grid-area

Some tips to remember these 6 properties:

記住這6個屬性的一些技巧：

The template keyword can only be used on the grid

template關(guān)鍵字只能在網(wǎng)格上使用

a) They’re used to declare grids and named areas

a)它們用于聲明網(wǎng)格和命名區(qū)域

b) Properties with the

b)具有的屬性

template keyword are plural

template關(guān)鍵字為復(fù)數(shù)

Properties for grid items do not have the template keyword

網(wǎng)格項(xiàng)目的屬性沒有template關(guān)鍵字

a) These properties are singular

a)這些屬性是單數(shù)

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.

創(chuàng)建網(wǎng)格時，可以在列和行之間創(chuàng)建空格。這些空間稱為間隙。

There are three properties to remember:

要記住三個屬性：

grid-column-gap

grid-row-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.

如果使用單個數(shù)字，則兩個值都將是該數(shù)字。

/* 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.

見筆與差距顯式網(wǎng)格由澤爾與Liew( @zellwk )上CodePen 。

對齊事物 (Aligning things)

This is where many people get confused.

這是許多人感到困惑的地方。

There are six properties to align things:

有六個屬性可以使事物對齊：

justify-content

align-content

justify-items

align-items

justify-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.

這兩組屬性告訴您您要處理的內(nèi)容。如果您了解property關(guān)鍵字，就會知道如何使用它們。

對齊與對齊 (Justify vs align)

Each CSS Grid has two axes:

每個CSS網(wǎng)格都有兩個軸：

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.

當(dāng)你justify什么，你根據(jù)主軸改變對齊。 align某物時，您正在根據(jù)橫軸更改對齊方式。

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.

橫軸是您閱讀第一行結(jié)尾后的閱讀方式。

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更改語言方向，則主軸和十字軸也會改變。

內(nèi)容，項(xiàng)目和自我 (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允許您將網(wǎng)格本身與網(wǎng)格外部的可用空間對齊。僅當(dāng)網(wǎng)格小于其定義的區(qū)域(很少見)時，才需要這些屬性。

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

You can pick from seven values:

您可以從七個值中進(jìn)行選擇：

start: flush grid to the start of the axis

start ：將網(wǎng)格刷新到軸的起點(diǎn)

end: flushed grid to the end of the axis

end ：沖洗網(wǎng)格到軸的末端

center: align grid to the center of the axis

center ：將網(wǎng)格與軸中心對齊

stretch: grid fills the axis (this is the default value)

Stretch ：網(wǎng)格填充軸(這是默認(rèn)值)

space-between: spreads whitespace between grid items. No whitespace at the ends

space-between ：在網(wǎng)格項(xiàng)目之間擴(kuò)展空格。末尾沒有空格

space-around: spreads whitespace around each grid item

空格：在每個網(wǎng)格項(xiàng)周圍分布空白

space-evenly: spreads whitespace evenly around all grid items including the ends

均勻空間 ：在所有網(wǎng)格項(xiàng)目(包括末端)周圍均勻地分布空白

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的《網(wǎng)格的完整指南》。它詳細(xì)解釋了每個值的作用。您可以閱讀以獲取更多信息。

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

我們在這里的重點(diǎn)是記住這些屬性以及如何使用它們。讓我們回到下一組屬性上。

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使您可以將網(wǎng)格項(xiàng)與它們各自單元格中的任何可用空格對齊。在大多數(shù)情況下，當(dāng)您嘗試對齊內(nèi)容時，您會尋找justify-items或align-items 。

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

You can pick from the same four values:

您可以從相同的四個值中進(jìn)行選擇：

start: flush item to the start of the axis

start ：將項(xiàng)目沖洗到軸的起點(diǎn)

end: flush item to the end of the axis

end ：將項(xiàng)目沖洗到軸的末端

center: align item to the center of the axis

中心：將項(xiàng)目與軸中心對齊

stretch: fills the axis (this is the default value)

Stretch ：填充軸(這是默認(rèn)值)

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 。不同之處在于，它僅允許您更改一個網(wǎng)格項(xiàng)目的對齊方式。

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

隱式網(wǎng)格 (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).

假設(shè)您創(chuàng)建了一個CSS網(wǎng)格，但是沒有足夠的行。在下面的示例中，我僅為三個項(xiàng)目(3列1行)創(chuàng)建了一個顯式網(wǎng)格。

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

But I have six items!

但是我有六個項(xiàng)目！

<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.

當(dāng)您的顯式網(wǎng)格中沒有足夠的空間時，CSS Grid將幫助您自動創(chuàng)建其他網(wǎng)格。默認(rèn)情況下，它將創(chuàng)建更多行。

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

如果要切換網(wǎng)格方向，則將grid-auto-flow為row 。

This automatically created parts are called the implicit grid.

自動創(chuàng)建的零件稱為隱式網(wǎng)格。

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

您可以使用以下兩個屬性來調(diào)整自動創(chuàng)建的列或行：

grid-auto-columns

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 。

如何記住隱式網(wǎng)格 (How to remember the implicit grid)

auto is the keyword you want to watch out for.

auto是您要注意的關(guān)鍵字。

template creates the explicit grid

template創(chuàng)建顯式網(wǎng)格

auto creates the implicit grid

auto創(chuàng)建隱式網(wǎng)格

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

我經(jīng)常使用隱式網(wǎng)格。在另一篇文章中，我將分享如何使用CSS Grid。

結(jié)語 (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％的網(wǎng)格都需要知道的每個CSS Grid屬性！這是您了解的屬性的摘要：

Creating a grid
創(chuàng)建網(wǎng)格

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
在網(wǎng)格中定位項(xiàng)目

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

I hope this helps you remember CSS Grid! All the best!

希望這可以幫助您記住CSS Grid！祝一切順利！

Thanks for reading. Did this article help you in any way? If you did, I hope you consider sharing it. You might help someone out. Thank you!

謝謝閱讀。本文對您有任何幫助嗎？如果這樣做，希望您考慮共享它。您可能會幫助某人。謝謝！

This article was originally posted at zellwk.com.Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初發(fā)布于zellwk.com 。如果您想獲得更多文章來幫助您成為更好的前端開發(fā)人員，請注冊我的時事通訊。

翻譯自: https://www.freecodecamp.org/news/how-i-remember-css-grid-properties-3afee895763/