css网格_CSS网格容器
css網(wǎng)格
CSS | 網(wǎng)格容器 (CSS | Grid Containers)
There are numerous ways to display our list items or elements. For instance, we can display them in the navigation bar, in a menu bar and whatnot. Well, it would be right to say that there are many more such methods to imply to our web page. Besides, it is solely the developers' choice of what kind of styling or formatting they want to use for their list items. But let us discuss one such method which is used very often and also helps in making your web page much versatile and responsive, CSS Grid Container.
有很多方法可以顯示我們的列表項(xiàng)或元素。 例如，我們可以在導(dǎo)航欄，菜單欄等中顯示它們。 好吧，很正確地說，還有更多這樣的方法暗示著我們的網(wǎng)頁。 此外，這完全是開發(fā)人員選擇要用于其列表項(xiàng)的樣式或格式的選擇。 但是，讓我們討論一種經(jīng)常使用的方法，它還有助于使您的網(wǎng)頁具有更多用途和響應(yīng)能力，即CSS Grid Container 。
Grid container is not a tough method to use to display the elements of your web page. Well, what is the grid container is the first place? So, grid containers comprise of grid items and those same items are placed or inserted inside columns and rows. We all have come across various grids in our daily life, so imagine one such empty grid and start placing items inside that grid's rows and columns and there you are, that is a grid container and the same thing is possible in CSS as well.
網(wǎng)格容器并不是用來顯示網(wǎng)頁元素的艱難方法。 那么，什么是網(wǎng)格容器才是第一位的？ 因此，網(wǎng)格容器由網(wǎng)格項(xiàng)目組成，并且將那些相同的項(xiàng)目放置或插入到??列和行內(nèi)。 我們每個(gè)人在日常生活中都遇到過各種各樣的網(wǎng)格，所以想象一個(gè)空的網(wǎng)格并開始將項(xiàng)目放置在該網(wǎng)格的行和列中，然后就可以了，這是一個(gè)網(wǎng)格容器，并且CSS中也可以做到這一點(diǎn)。
Implementation:
實(shí)現(xiàn)方式：
With the definition of a grid container in mind, let us now understand how to make an element behave like a grid container. This again is not a tough task, all you gotta do is modify the display property a little bit. To make an element behave like a grid container, you will have to set your display property to grid or inline-grid. This way your HTML element will start behaving like a grid container.
考慮到網(wǎng)格容器的定義，讓我們現(xiàn)在了解如何使元素表現(xiàn)得像網(wǎng)格容器一樣。 再次這不是一項(xiàng)艱巨的任務(wù)，您要做的只是稍微修改一下顯示屬性。 為了使元素的行為像網(wǎng)格容器一樣，您必須將display屬性設(shè)置為grid或inline-grid 。 這樣，您HTML元素將開始表現(xiàn)得像一個(gè)網(wǎng)格容器。
Syntax:
句法：
Element {display: grid/inline-grid; }Properties:
特性：
Now let us look at some of the grid container's properties:
現(xiàn)在讓我們看一下網(wǎng)格容器的一些屬性：
1)grid-template-columns屬性 (1) The grid-template-columns property)
The fundamental use of grid-template-columns-property is to specify the total number of columns in the grid layout and it can also be used to specify the width of those columns.
grid-template-columns-property的基本用途是指定網(wǎng)格布局中的總列數(shù)，也可以用于指定這些列的寬度。
The values of this property are space-separated lists where each value would define the length of every column.
此屬性的值是用空格分隔的列表，其中每個(gè)值將定義每列的長度。
For instance, if you wish to add 4 columns in your grid layout, just specify the width of the 4 columns or just type in auto for every column to have the same width.
例如，如果您希望在網(wǎng)格布局中添加4列，則只需指定4列的寬度，或者僅鍵入auto即可使每列具有相同的寬度。
Syntax:
句法：
Element {display: grid;grid-template-columns: auto auto auto auto; }Example:
例：
<!DOCTYPE html> <html><head><style>.grid {display: grid;grid-template-columns: auto auto auto auto;grid-gap: 15px;background-color: red;padding: 10px;}.grid> div {background-color: pink;text-align: center;padding: 20px 0;font-size: 30px;}</style> </head><body><h1>CSS Grid container</h1></br><div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div> </body></html>Output
輸出量
Note: One thing to keep in mind here is that if you have more than 4 elements in a 4 column grid, then the grid will create a new row itself to fit in the items.
注意：這里要記住的一件事是，如果在4列網(wǎng)格中有4個(gè)以上的元素，則網(wǎng)格將自己創(chuàng)建一個(gè)新行以適合項(xiàng)目。
2)grid-template-rows屬性 (2) The grid-template-rows property)
This property is the opposite of column property, in this, you can define the height of each row in the grid.
此屬性與column屬性相反，在此屬性中，您可以定義網(wǎng)格中每一行的高度。
Syntax:
句法：
Element {grid-template-rows: 50px 100px; }Example:
例：
<!DOCTYPE html> <html><head><style>.grid {display: grid;grid-template-columns: auto auto auto;grid-template-rows: 80px 150px;grid-gap: 10px;background-color: red;padding: 10px;}.grid > div {background-color: pink;text-align: center;padding: 20px 0;font-size: 30px;}</style> </head><body><h1>CSS Grid container</h1><div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></body></html>Output
輸出量
In the above example both rows are set by property grid-template-rows to 80px and 150px.
在上面的示例中，兩行都通過屬性grid-template-rows設(shè)置為80px和150px 。
3)證明內(nèi)容屬性 (3) The justify-content property)
To fit in the entire grid within the container justify-content property is used.
為了適合容器內(nèi)的整個(gè)網(wǎng)格，使用了justify-content屬性。
Syntax:
句法：
Element {justify-content: space-evenly; }Example:
例：
<!DOCTYPE html> <html><head><style>.grid {display: grid;justify-content: space-evenly;grid-template-columns: 40px 60px 70px;grid-gap: 10px;background-color: pink;padding: 10px;}.grid> div {background-color: red;text-align: center;padding: 20px 0;font-size: 30px;}</style> </head><body><h1>CSS Grid container</h1><div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div> </body></html>Output
輸出量
Note: For this property to actually work, make sure that the grid's entire width should be less than that of the container's width.
注意：為了使此屬性真正起作用，請確保網(wǎng)格的整個(gè)寬度應(yīng)小于容器的寬度。
4)align-content屬性 (4) The align-content property)
To align the entire grid vertically inside the container this property is used.
要在容器內(nèi)垂直對齊整個(gè)網(wǎng)格，請使用此屬性。
Syntax:
句法：
Element {align-content: center; }Example:
例：
<!DOCTYPE html> <html><head><style>.grid {display: grid;height: 400px;align-content: center;grid-gap: 15px;grid-template-columns: auto auto auto;background-color: pink;padding: 10px;}.grid > div {background-color: red;text-align: center;padding: 20px 0;font-size: 40px;}</style> </head><body><h1>CSS Grid container</h1><div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div> </body></html>Output
輸出量
Note: For this property to actually work, make sure that the grid's entire height should be less than that of the container's height.
注意：要使此屬性真正起作用，請確保網(wǎng)格的整個(gè)高度應(yīng)小于容器的高度。
翻譯自: https://www.includehelp.com/code-snippets/css-grid-container.aspx
css網(wǎng)格
總結(jié)
以上是生活随笔為你收集整理的css网格_CSS网格容器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： enumset.allof_Java E
- 下一篇： php面试php数组变ahp,关于PHP