The 2017 macOS and iOS updates include a version of Safari that implements the CSS Grid Layout Module,
which is finally available in all modern browsers.
It's a very flexible and intuitive way to represent grids. In today's post, I'd like to study this again.
(Note that this article is based on a Japanese article and only the necessary points have been translated.
https://qiita.com/morishitter/items/738488290451555d913c
Defining the Grid
When you want an element to be laid out in a grid, you need to specify display: grid or display: inline-grid for its parent element.
This parent element is called the grid container, and the child elements to be grid-layout are called grid items.
The grid container can have the properties grid-template-column and grid-template-row.
Each of these specifies the size of the grid in columns and rows, in terms of the number of columns and rows.
Example: A grid with 3 rows and 5 columns
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
Properties that can be specified for the grid container
grid-gap
To be precise, grid-gap is a short-hand for grid-column-gap and grid-row-gap.
It specifies the margin between columns and rows between grid items.
Example: 10px margin for columns, 15px margin for rows
.container {
grid-gap: 10px 15px;
}
justify-items, align-items, justify-content, align-content
These are the same properties used in Flexbox layouts. They are not part of the Flexbox specification,
but are part of the Box Alignment Module, which can also be used for grid containers.
These properties are used to align grid items, and are not new to CSS Grid, so their usage is omitted.
grid-template-areas
This property allows you to give a name to a grid item. You don't need to learn how to use it.
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
The way it is written is very weird
. is specified for an empty grid.
Properties that can be specified for grid items
This section describes the properties that can be specified for grid items,
which are children of the grid container. Note that float, clear, and vertical-align do not apply to grid items.
grid-column, grid-row
grid-template-column and grid-template-row define the grid, and it is these properties that determine which elements are placed where.
To be precise, grid-column is the shorthand for grid-column-start and grid-column-end, and grid-row is the shorthand for grid-row-start and grid-row-end.
There is also grid-area, which is a shorthand for grid-column and grid-row, but it's easier to just use grid-column and grid-row.
These properties specify gridlines (sometimes called Line-based Placement).
grid-column specifies the start and end lines of a column, grid-row specifies the start and end lines of a row.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}
.item-a {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.item-b {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
justify-self, align-self
This was also present in the Flexbox layout. This property aligns the specified grid items.
An aside
"Grids" have always been possible using <table> tags, floats, display: inline-block, display: table, Flexbox, etc. However, with the creation of the CSS Grid specification, it is now possible to create grids without using a preprocessor mixin or a grid framework. However, there is now a specification for grids called CSS Grid, which allows you to create grids without using a preprocessor mixin or a grid framework. In my opinion, the biggest benefit of using CSS Grid is that you can write display: grid to represent a grid and put your design intent into your code. Also, it's easier to remember CSS Grid properties if you are aware of which properties are for the grid container and which are for the grid items, as in the case of Flexbox.
Incidentally, there is also a value called display: subgrid, which is used to turn a grid item into a grid container and its children into a grid layout, but this has been moved to the Level 2 specification and is currently not implemented outside of Firefox. In the future, it is better to use CSS Grid to represent grids, and Flexbox for layout within components.
Top comments (0)