Quickly Build Your Website with CSS Grid

by A Design Blogger

CSS Grid is a new type of layout supported by web browsers. CSS stands for Cascading Style Sheets, and is designed to be a faster, easier way to build websites than HTML.

What is a CSS Grid?

CSS Grid layout is two dimensional, consisting of columns and rows, and enables users to build more complex layouts than the one-dimensional Flexboxes of the past. It is possible to use both Flexboxes and Grid Layouts in CSS.

CSS Grid Properties

The Grid layout system consists of a grid container, grid cells, grid lines, grid areas, and grid items. The grid container is the parent element which contains the cells in the grid. The cells are created by grid lines. Grid lines define the structure of the grid, and can be drawn either horizontally or vertically. The grid area is any area inside the grid that is surrounded by four lines, and can consist of multiple cells. A grid item is a child element of the parent grid container.

Creating a CSS Grid

In order to learn how to work with these grids, it is important to have a basic understanding of CSS and HTML. Creating a CSS Grid is fairly simple. Follow these steps to create a Grid:

  1. Use basic html to create the grid container, making sure to assign a container class to a "div" element in the body.
  2. Add the display property to the container class using CSS.
  3. Define the grid rows and columns by adding these properties to the container class: grid-template-rows and grid-template-columns.

Add as many rows and columns as you would like by defining the column and row properties with values. Make the grid visible by adding items and background color. Continue to customize the grid using CSS until satisfied.