Learn about CSS Grid Layout – Part 1

Tram Ho

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:

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

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

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:

Result

grid-template-areas

Define grid areas by the name of the defined grid patterns = grid-area: “area-name”; Example:

Result:

grid-template

1 shorthand to set grid-template-rows, grid-template-columns, and grid-template-areas in 1 declaration

Syntax:

column-gap, row-gap

Determine the thickness of the lines, quite like padding when dividing the layout properly =)) Example:

Result:

gap

A shorthand is useful for setting column-gap and row-gap

Examples and results are as above

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 = ))

Share the news now

Source : Viblo