When doing experiments today, I saw that the requirement was to use grid layout implementation. In retrospect, most of my previous projects used elastic layouts, so grid layouts were new to me. Therefore, I searched for information and conducted systematic study, hereby summarize.
A, definitions,
Grid layout, as the name suggests, is a grid arrangement of elements on a page. Technically, it is a set of intersecting horizontal and vertical lines that form the columns and rows of a grid. We place grid elements in these locations based on business requirements. Because I have studied elastic layout before, it can be used for comparative study.
Grid vs. elastic layout
According to the data, the elastic layout serves the one-dimensional layout, and the spatial distribution only takes place within the row. A grid layout is designed for a two-dimensional layout, with rows and columns distributed in space.
To put it more abstractly, a grid layout can control the X and y axes, whereas an elastic layout can control only one axis.
Grid containers and grid projects
The areas in the grid are divided into “Container” and “Item”.
Because grid containers and grid projects will have different properties, it is important to distinguish between them.
For example, in this code, Container is the outermost container and Item is the grid item.
<div id="container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
Copy the codeContainer properties and project properties
Having distinguished between containers and projects, let’s look at container properties and project properties.
Here is my summary of the table for container and project properties.
Rows and columns are used basically the same way, so I combined them.
All of the above attributes are commonly used, so you can understand them if you try more.
Specific use can see nguyen other teacher’s article: www.ruanyifeng.com/blog/2019/0…
And this one from MDN: developer.mozilla.org/zh-CN/docs/…