Basics of CSS Grid -1

Photo by Pankaj Patel on Unsplash

As i have written in my previous blog on flexbox, that it helped me get out of the bootstrap trap. I also use another new addition to CSS, which is know as grid. It is an awesome system which can be used to develop the whole website.

I generally use a combination of flexbox and Grid in my projects. CSS grid can divide the whole page into columns and rows easily and there are many ways in which you can place the elements.

The best resource to quickly reference Grid this article on CSS tricks.

And then there is this awesome free tutorial from Wes Bos. This blog series is also inspired and based upon that series.

I will be using this codepen for the tutorial.

Let first have some divs with class items inside a div with class container. As, you have assumed, the container will be Grid and the items will be it’s children.

The basic div

You can read the rest of the blog from my site. Link for the same is below.

Check part-2 here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Export vulnerabilities/issues into CSV from SonarQube Community/Developer Edition

Jupyter Notebook Cheat sheet

Arctos Biweekly Report: Jun 7th — Jun 20th

A Buffet of Specialized Data Types — Real Python

A Buffet of Specialized Data Types – Real Python

What does the digital industry look like?

What you need to know before configuring the Algorand Archival and Indexer Modes for Relay and…

Nabox Weekly Issue 27

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

CSS Concepts to Know: Specificity

10 CSS pro tips, code this not that — Codipher

Understanding CSS Flexbox — Jerry’s Tech Note

CSS Shorthand Properties