New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉
postImage

Tutorial: CSS Grid

blogImage

By Emmanuel Chinonso

Web Developer

CSS Grid

Contrast Bootstrap UI Kit

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.

CSS 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;
}

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;
}

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

CSS Code:

.grid-container {
display: grid;
grid-row-gap: 50px;
}

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;
}

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

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro

ad-banner

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro

Share Post:

Comments

...