YouTip1
2
3
4
5
6
7
8
9
Css Grid
A grid is a set of intersecting horizontal and vertical lines that defines the columns and rows of the grid.
CSS provides a grid-based layout system, with rows and columns, that allows us to design web pages more easily without using floats and positioning.
The following is a simple web page layout using grid layout, containing six columns and three rows:
!(#)
[Try it »](#)
* * *
## Browser Support
The latest versions of some browsers currently support grid layout.
| | | | | |
| --- | --- | --- | --- | --- |
| 57.0 | 16.0 | 52.0 | 10 | 44 |
* * *
## Grid Elements
A grid layout consists of a parent element and one or more child elements.
## Example
[Try it »](#)
* * *
## display Property
When an HTML element has its display property set to grid or inline-grid, it becomes a grid container, and all direct child elements of this element become grid items.
## Example
.grid-container{display:grid; }
[Try it »](#)
## Example
.grid-container{display:inline-grid; }
[Try it »](#)
* * *
## Grid Tracks
We define the columns and rows in a grid using the grid-template-columns and grid-template-rows properties.
These properties define the grid tracks. A grid track is the space between any two lines in a grid.
In the figure below, you can see a green box track—the first row track of the grid. The second row has three white box tracks.
!(#)
In the following example, we use the grid-template-columns property to create four columns in the grid container:
## Example
.grid-container{display:grid; grid-template-columns:auto auto auto auto; }
[Try it »](#)
In the following example, we use the grid-template-rows property to set the height of rows in the grid container:
## Example
.grid-container{display:grid; grid-template-rows:100 px 300 px; }
[Try it »](#)
### fr Unit
Tracks can be defined using any length unit.
The grid introduces the fr unit to help us create flexible grid tracks. One fr unit represents one equal part of the available space in the grid container.
The following example defines a grid that will create three equal-width tracks that will grow and shrink with the available space.
## Example
.grid-container{display:grid; grid-template-columns:1 fr 1 fr 1 fr; }
[Try it »](#)
### Grid Cell
A grid cell is the smallest unit in a grid element. Conceptually, it is very similar to a cell in a table. Looking back at our earlier example, once a grid element is defined within a parent element, its child elements will be arranged in each predefined grid cell. In the figure below, I have highlighted the first grid cell.
!(#)
### Grid Area
A grid element can span one or more cells in the row or column direction, and this creates a grid area. The shape of a grid area should be a rectangle—in other words, you cannot create an "L"-shaped grid area. The highlighted grid area in the figure below spans 2 columns and 2 rows.
!(#)
* * *
## Grid Column
The vertical direction of grid elements is called a column (Column).
!(#)
* * *
## Grid Row
The horizontal direction of grid elements is called a row (Row).
!(#)
* * *
## Grid Gap
Grid gap refers to the horizontal gap between two grid cells or the vertical gap between grid cells.
!(#)
You can use the following properties to adjust the gap size:
* grid-column-gap
* grid-row-gap
* grid-gap
The following example uses the grid-column-gap property to set the grid gap between columns:
## Example
.grid-container{display:grid; grid-column-gap:50 px; }
[Try it »](#)
The following example uses the grid-row-gap property to set the grid gap between rows:
## Example
.grid-container{display:grid; grid-row-gap:50 px; }
[Try it »](#)
The grid-gap property is a shorthand for grid-row-gap and the grid-column-gap properties:
## Example
.grid-container{display:grid; grid-gap:50 px 100 px; }
[Try it »](#)
The grid-gap property can set both row and column gaps at the same time:
## Example
.grid-container{display:grid; grid-gap:50 px; }
[Try it »](#)
* * *
## Grid Lines
The intersection between columns and rows are grid lines.
Grid creates numbered grid lines for us to position each grid element.
For example, in this three-column, two-row grid, there are four vertical grid lines (marked with gray circles) and three horizontal grid lines (marked with black circles).
!(#)
Grid elements can be positioned by referring to these line numbers.
The figure below defines four vertical grid lines and four horizontal grid lines:
!(#)
The order of grid line numbering depends on the writing mode of the document. In left-to-right writing languages, grid line number 1 is on the far left. In right-to-left writing languages, grid line number 1 is on the far right.
Next, I will use the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties to demonstrate how to use grid lines.
In the following example, we set a grid element's grid lines to start at column 1 and end at column 3:
## Example
.item1{grid-column-start:1; grid-column-end:3; }
[Try it »](#)
In the following example, we set a grid element's grid lines to start at row 1 and end at row