HTML CSS JAVASCRIPT JQUERY LIQUID

Grid Intro

❮ Previous Next ❯

Header

Menu

Main

Right

Footer

Grid Layout

The CSS Grid Layout Module provides a way to arrange web page elements in a grid, using rows and columns. It simplifies webpage design by eliminating the need for using floats and positioning.

Grid Elements

A grid layout is made up of a main container, and inside it, there are some smaller elements.

Display Property

An HTML element turns into a grid container if you set its display property to either grid or inline-grid.

All the immediate children of the grid container automatically turn into grid items.

Grid Columns

The up-and-down lines in grid items are named columns.

Grid Rows

The lines that go side to side in a grid are called rows.

Grid Gaps

The empty spaces separating columns or rows are referred to as gaps.

You can change the space between things by using one of these options:

  • column-gap
  • row-gap
  • gap

Grid Lines

The lines that separate columns are named column lines.

The lines that separate rows are known as row lines.

When you're putting something in a grid container, use the line numbers as a reference.

All CSS Grid Properties

Property Description
column-gap Describes the space between the columns.
gap A short way to describe both the gap between rows and the gap between columns in HTML using the row-gap and column-gap properties.
grid A shorter way to set the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties all at once.
grid-area You can use this property to give a name to a grid item. Alternatively, it acts as a shortcut for the properties grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
grid-auto-columns Sets the standard width for columns.
grid-auto-flow Describes where automatically arranged items go on the grid.
grid-auto-rows Describes the standard height of a row.
grid-column A shorter way to describe the grid-column-start and grid-column-end properties.
grid-column-end Indicates the stopping point for the grid item.
grid-column-gap Describes how much space there is between columns.
grid-column-start This tells us where to begin the grid item.
grid-gap A shorter way to describe the gap between rows and columns in a grid.
grid-row A convenient way to set the starting and ending positions of rows in a grid layout.
grid-row-end This tells us where the grid item should stop.
grid-row-gap Describes the width of the space between rows.
grid-row-start Indicates the position to begin the grid item.
grid-template A shorter way to set the grid-template-rows, grid-template-columns, and grid-areas properties using a single property.
grid-template-areas Describes how to show columns and rows with named grid items.
grid-template-columns This tells us how big the columns are and how many columns there are in a grid layout.
grid-template-rows This sets the height of the rows in a grid layout.
row-gap Describes the space between the rows in a grid.
❮ Previous Next ❯