Introduce
Hello everyone, welcome to my channel =))
I promise myself that I have to learn CSS Grid for a long time, but today I have the opportunity to learn together and at the same time want to share about CSS Grid Layout, a quite powerful and used layout system today.
CSS Grid layout is a system that provides two-dimensional grid layouts, specifically doesn’t use floats and positions, and is intended to bring fresh changes to UI layout design.
Most browsers today support CSS Grid Layout, you can see more pictures below or at this link ( https://caniuse.com/#feat=css-grid )
OK, let’s get started (len)
Key terms
Why is there this item, because we need to understand grid layout concepts to avoid confusion and understand how they are applied to the design of layouts.
Grid Container
This is the parent element that determines whether the child elements display in grid layout or not Example:
1 2 3 4 5 6 7 | <div class="container" style="display: grid"> <div class="item item 1"></div> <div class="item item 2"></div> <div class="item item 3"></div> <div class="item item 4"></div> </div> |
Grid item
Simply put, a grid item is a child element that conforms to a grid layout
Grid Line
What is line, line is line, line, that’s all => Grid Line is the horizontal or vertical lines between the child elements, the yellow line below is a grid line
Grid Cell
What is cell, cell is cell, Grid Cell is the distance between two horizontal lines and two adjacent lower lines, I understand that ntn, the illustration below will be easier to understand =))
Grid Track
What is track, bro, translate yourself, while Grid Track is the distance between two adjacent horizontal lines or two adjacent vertical lines
Grid Area
What are areas, are areas, items that can span a cell or multiple cells in rows or columns to form a Grid Area
Let’s practice
display grid
1 2 3 4 5 | .container { display: grid; // các phần tử con sẽ hiển thị theo khối block display: inline-grid; // các phần tử con sẽ hiển thị theo khối inline } |
The value grid and inline-grid are quite similar to setting the child elements as <div> or <span>
grid-template-columns and grid-template-rows
Used to identify rows and colums
1 2 3 4 5 | .container { grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } |
Result:
If you want to define repeating rows or columns with the same spacing, repeat () is useful when you want elements to have equal space. Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* CSS */ .container { display: inline-grid; grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(3, 120px); border: 1px solid green; } .container div { border: 1px solid green; } /* HTML */ <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> |
Result
grid-template-areas
Define grid areas by the name of the defined grid patterns = grid-area: “area-name”; Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | /* CSS */ .item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; 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"; } /* HTML */ <div class="container"> <div class="item-a"></div> <div class="item-b"></div> <div class="item-c"></div> <div class="item-d"></div> </div> |
Result:
grid-template
1 shorthand to set grid-template-rows, grid-template-columns, and grid-template-areas in 1 declaration
Syntax:
1 2 3 4 | .container { grid-template: <grid-template-areas> | <grid-template-rows> / <grid-template-columns>; } |
column-gap, row-gap
Determine the thickness of the lines, quite like padding when dividing the layout properly =)) Example:
1 2 3 4 5 6 7 | .container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; } |
Result:
gap
A shorthand is useful for setting column-gap and row-gap
Examples and results are as above
1 2 3 4 5 6 | .container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; gap: 15px 10px; /*<row-gap> <column-gap>*/ } |
summary
The above is my first part about CSS Grid Layout, there are many other properties that I can learn gradually for part 2, hoping to help me and everyone and remember to subscribe to my channel = ))