🎉
Windframe Form builder is finally here.
postImage

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 using 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:

css
.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:

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

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

CSS Code:

css
.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:

css
.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

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.Download the free react template

ad-banner

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

Related Posts

Comments

...