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

Reasons why Wearable integration is the Future of Mobile Application Development

Programming? Why, What and How

Three most important aspects of code

Why use Message Brokers in your System Design Interview?

ECE : Branch of endless opportunities to Learn.

Every moment is a fresh beginning. by T.S. Eliot

Deploy your front end application to amazon s3 using codeBuild and codePipeline

GridDB Schema Modification | GridDB: Open Source Time Series Database for IoT

Maximum amount of results per page across SerpApi’s supported Google engines

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 Variables — Learn CSS Variables in 2022

Multi step form | Multi step form html css | Javascript Multi Step Form

Multi step form | Multi step form html css | Javascript Multi Step Form

CSS Basics #5: Some Advanced Topics

CSS (Cascading Style Sheets)