1) Hello Everyone, the theme of my presentation CSS Grid Layout. I will tell you about the support of browsers for this specification, the differences between grid and flexbox and the main features of grid.
2) 2 years ago browsers have released updates, among which were updates for CSS. Now you can use the CSS Grid Layout specification practically in all browsers without difficulty.
3) Many people "Stop, I use flexbox, why do I need any more grids?". The question is more than appropriate. CSS Grid will not replace Flexbox. The first difference is that Flexbox only works in one dimension. It follows that we can only place flex elements along the main axis or along the transverse axis. We can't put flex items across multiple axes. CSS Grid allows us to work with the layout in two-dimensional space and align the content in both dimensions.
4) Before start working with CSS Grid need to understand the basic terms.
Grid container is a set of intersecting horizontal and vertical grid lines that divide the grid container space into grid areas where grid elements can be placed. Inside the grid container, there are two sets of grid lines: one defines the column axis, the other defines the row axis.
Grid lines are the horizontal and vertical separators of the grid container. These lines are on either side of a column or row.
Grid track is the space between two adjacent grid lines, vertical or horizontal.
Grid cell is the smallest indivisible unit of the grid container that can be referenced when positioning grid elements. It is formed at the intersection of grid row and grid column.
A Grid area is a space within a grid container in which one or more grid elements can be placed. This element can consist of one or more grid cells.
5) We create a grid container by declaring display: grid or display: inline-grid on the element. Once we do this, all direct children of this element will be the elements of the mesh.
6) We define rows and columns in our grid using the grid-template-columns and grid-template-rows properties. In the example, we create a grid with a column width of 200px. Each child element of the grid will be located in a separate grid cell.
7) the Size of the tracks (bands) can be set using any length unit. The new FR length unit represents a fraction of the available space in the grid container. Auto and fr work the same in some cases, but fr is calculated after the block auto is calculated.
8) the grid-template-areas Property determines the grid template referring to the names of the areas that are specified by the grid-area property.
Repeating the name of the area causes the content to span these cells. A dot means an empty cell. The syntax itself provides a visualization of the grid structure.
9) Grid element can be a grid container. What is shown in the slide.
In addition to all the above, grid uses repeat(),minmax() to quickly create blocks and control block sizes. Grid is able to control the size and positioning of blocks relative to the Grid Line using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. You can create gaps between blocks by using the grid-column-gap and grid-row-gap properties, or by using the reduced grid-gap property. Also useful are properties such as: justify-items/content, align-items/content,grid-auto-flow. Apply the justify/align-self properties to the child block.
10) With the help of Grid it is possible to solve those problems with greater speed, convenience and originality that with the help of flexbox, float properties or tables. Like flexbox, Grid is another layout tool that has its advantages and disadvantages. No one will say, "Use the Grid here, but not here." If the implementation of the task on the Grid took twice as long as on flexbox, then such tasks do not need to be solved on the Grid, it is a matter of your experience.