CSS Grid — A Comprehensive Overview

CSS Grid — A Comprehensive Overview

Positioning elements on your page in CSS can often cause headaches. I have recently taken the time to study CSS Flexbox and Grid in depth and feel that given 15 minutes or so of research, anyone can learn to position items on their page with ease.

Positioning elements on your page in CSS can often cause headaches. I have recently taken the time to study CSS Flexbox and Grid in depth and feel that given 15 minutes or so of research, anyone can learn to position items on their page with ease. The great thing about CSS Grid too is that it is a great tool for media queries in order to make your site responsive. You can easily decide to show four elements in columns next to each other on a large screen, reduce is to two on a smaller screen or tablet and then take it down to one on a mobile device. Specifying column numbers is super easier and with one line in each media query, you can really improve the responsiveness of a section of your application.

Site with grid layout

Photo by Pankaj Patel on Unsplash

The thing that makes CSS Grid Layout so powerful is that it is a 2-dimensional system. Unlike flexbox which is mainly 1-dimensional and often requires several layers of nesting to creating a grid like layout, in CSS Grid you simply apply styles to one parent element (known commonly as the Grid Container) and then all the containers children (Grid Items).

To start, create a div and give that div a class of container or grid-container so that you can easily style it:

<div class="grid-container"></div>

The first step in your CSS is to give this div a display style of grid, you can choose between grid (block-level grid) and inline-grid (inline):

.grid-container {
    display: grid;
}

This in itself will change nothing on the page, however, it opens the door to applying styling which will organize the elements you choose to nest within your div.

Let’s say for arguments sake that we added several grid item divs into our container div and we now want to arrange them next to each other in columns of specific sizes. We have quite a few options. We can do this by adding the grid-template-columns CSS property to our grid-container div’s styling:

.grid-container {
    display: grid;
    // Option 1 
    grid-template-columns: 100px 200px auto 300px;
    // Option 2 
    grid-template-columns: 1fr 2fr;
    // Option 3
    grid-template-columns: repeat(4, 100px);
}

css-grid css styling web-development ui

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated UI/UX Developer

Do you need UI/UX Designers for hire? **[Hire Dedicated UI/UX Developer](https://hourlydeveloper.io/hire-dedicated-ui-ux-developer/ "Hire Dedicated UI/UX Developer")** from **[HourlyDeveloper.io](https://hourlydeveloper.io/...

CSS External Styling | UI/UX Basics for Fullstack Developers | Fullstack Basics

CSS External Styling | UI/UX Basics for Fullstack Developers | Fullstack Basics. The most common way to add CSS, is to keep the styles in external CSS files. Let's find out how to do it.