DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Grid

CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid

Display Property:

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

CSS Code:

.grid-container {
  display: grid;
}
Enter fullscreen mode Exit fullscreen mode

All direct children of the grid container automatically become grid items. The vertical lines of grid items are called columns while the horizontal lines of grid items are called rows. The spaces between each column/row are called gaps. The grid-column-gap property sets the gap between the columns:

CSS Code:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}
Enter fullscreen mode Exit fullscreen mode

The grid-row-gap property sets the gap between the rows:

CSS Code:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}
Enter fullscreen mode Exit fullscreen mode

The grid-gap property can also be used to set both the row gap and the column gap in one value.

CSS Code:

.grid-container {
  display: grid;
  grid-gap: 50px;
}
Enter fullscreen mode Exit fullscreen mode

The lines between columns are called column lines. The lines between rows are called row lines.

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Top comments (0)

Read next

liucanzhu profile image

First Post

liucanzhu -

gcjordi profile image

AI brain for predicting the risk of suffering from Alzheimer's in 5 years using the current state of the gums

Jordi Garcia Castillon -

ceceliacreates profile image

How I became low-code certified with OutSystems

Cecelia Martinez -

nicosleonardo9 profile image

🤿 Looking for Waterpolo API for Research Consultant Project? 🌊

Nicos -