CSS Grid Layout Course 2021 | For Beginners | Part 1

Published: 17 August 2021
on channel: Learn Solidity
10
0

Here is a list of some good books about CSS:

CSS: The Definitive Guide: Visual Presentation for the Web: https://amzn.to/3APOk8R

HTML and CSS: Design and Build Websites: https://amzn.to/3ALKY6T

HTML and CSS QuickStart Guide: https://amzn.to/2Xub7Zn

CSS Grid Layout is a two-dimensional grid-based layout system that, when compared to previous web layout systems, fundamentally alters the way we create user interfaces. CSS has long been used to layout our web pages, but it has never been very effective. We started with tables, then moved on to floats, positioning, and inline-block, but all of these approaches were effectively hacks that left out a lot of crucial functionality (vertical centering, for instance). Flexbox is likewise a fantastic layout tool, but its one-way flow has different use cases – and they really compliment each other very well.

Before delving into Grid principles, it is critical to grasp the nomenclature. Because the phrases involved here are all essentially similar, it's easy to get them mixed up if you don't first learn their Grid-defined definitions. But don't worry, there aren't many.

Grid Container
The element to which the display: grid property is applied. It is the immediate parent of all grid elements.

Grid Area
The entire area is bounded by four grid lines. A grid area can have any number of grid cells. The grid region between row grid lines 1 and 3 and column grid lines 1 and 3 is shown below.

Grid Track
The area between two grid lines that are next to one other. You may think of them as the grid's columns or rows. The grid track between the second and third-row grid lines is shown here.

Grid Cell
The area between two neighboring row grid lines and two adjacent column grid lines. It is a single grid "unit." The grid cell is located between row grid lines 1 and 2 and column grid lines 2 and 3.


Watch video CSS Grid Layout Course 2021 | For Beginners | Part 1 online without registration, duration hours minute second in high quality. This video was added by user Learn Solidity 17 August 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10 once and liked it 0 people.