A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵

Grid is used for making complex web design layouts more easily as it's not so hard to master

Using Flex you can make only 1D layout but Grid gives you full power of creating 2D layout

Let's start

{ 2 / 21 }
First things first, start with giving the display property "grid" to the container element or parent element

{ 3 / 21 }
Nothing will change after adding display: flex; in the parent container becuase we need to define the width of columns. In order to set that columns width we have gird-template-columns property

{ 4 / 21 }
Let's start with defining the width of our columns.

For example, let's say I need two columns of width 60% and 40% respectively

grid-template-columns: 60% 40%;

{ 5 / 21 }
Ahh!! My grid items looks ugly as there is no spacing between them.
Here "grid-gap" property comes into play. For example I need 10px spacing along column and row

grid-gap: 10px;

{ 6 / 21 }
Similary we have grid-template-rows.

It is used to define the number of rows and height of rows.

grid-template-rows: 200px 400px;

{ 7 / 21 }
As you can see there is a lot of repeated code in
grid-template-columns: 200px 200px 200px 200px 200px;

Instead of this we can use repeat function 👇🏻

grid-template-columns: repeat(5, 200px);

{ 8 / 21 }
You might run into some responsiveness issues if you pass pixel unit or percentage in your grid-template-columns

In order to prevent this, it is recommended to use fraction values

For example 👇🏻

{ 9 / 21 }
You can use repeat function for fr as well

repeat(2, 1fr 2fr);

It wil repeat 1fr 2fr two times.

{ 10 / 21 }
Alright moving forward, you can set he height of grid element using grid-auto-rows

For ex, grid-auto-rows: 200px;

{ 11 / 21 }
Though there is a problem. By doing this, we are setting the fixed height so content inside items can be overflow.

For example 👇🏻

{ 12 / 21 }
In order to prevent this kind of issues we have minmax function

grid-auto-rows: minmax(200px, auto);

It's pretty intuitive that the height of gird items will be 200px minimun and "auto" maximun(according to content)

{ 13 / 21 }
From 14 to 21

https://t.co/QcX5188vjp

More from Pratham 👨‍💻🚀

5 amazing websites that will blow the mind of a developer. Definitely check them out

🧵👇🏻

1️⃣ Animation generator

- Dead simple visual tools to help you generate CSS for your projects.

🔗
https://t.co/IFmIEgDiVY


2️⃣ Neural Network Visualizer

- Deep playground is an interactive visualization of neural networks, written in TypeScript using d3.js.

🔗 https://t.co/mTAlFbJsOW


3️⃣ Blockchain Demo

- A visual demo of blockchain technology

🔗 https://t.co/I1RwxYcM1Z


4️⃣ Developer Roadmaps

- Step by step guides and paths to learn different tools or technologies

🔗 https://t.co/VSNPdG8jQR
12 websites that will help you learn web development faster (completely free): 🧵

1. How HTTP Works

Everything you need to know about HTTP based system.

🔗
https://t.co/gVZS4RzS1a


2. 30 Days of Node

Learn Node step by step with interactive examples and code snippet in 30 days.

🔗 https://t.co/9nbtMiNB1C


3. How DNS Works

Learn what happens when you type a website address in your browser

🔗 https://t.co/SqMRNnDbc3


4. Git

Check out this excellent free website to learn git visually.

🔗 https://t.co/rQJMISBDfS
Use these 5 websites to learn web development for free in 2023 (take a look):

1. Codedamn

All-in-one platform for learning web development:

• Hands-on practice and projects bundled
• Video content along with interactive labs, quizzes, and articles
• Every course comes with a certificate
• code brushes AI in playgrounds

🔗
https://t.co/mXmUtJZnOU


2. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/MjHNsLvkiL


3. RapidAPI Comics

Learn API development with RapidAPI Comics (sketch notes and fun analogies).

🔗 https://t.co/KONorFomgu


4. JS Visualizer 9000

Learn JavaScript by visualizing your code.

🔗 https://t.co/9NId4GjGAq

More from Coding

5 amazing websites that will blow the mind of a developer. Definitely check them out

🧵👇🏻

1️⃣ Animation generator

- Dead simple visual tools to help you generate CSS for your projects.

🔗
https://t.co/IFmIEgDiVY


2️⃣ Neural Network Visualizer

- Deep playground is an interactive visualization of neural networks, written in TypeScript using d3.js.

🔗 https://t.co/mTAlFbJsOW


3️⃣ Blockchain Demo

- A visual demo of blockchain technology

🔗 https://t.co/I1RwxYcM1Z


4️⃣ Developer Roadmaps

- Step by step guides and paths to learn different tools or technologies

🔗 https://t.co/VSNPdG8jQR
7 best GitHub repositories that can help you as a developer

Thread 🧵👇🏻

1️⃣ Awesome For Beginner

- A list of awesome beginners-friendly projects.

🔗
https://t.co/4ycLUOE52j


2️⃣ Awesome Python

- A curated list of awesome Python frameworks, libraries, software and resources.

🔗 https://t.co/6B3Ito5wML


3️⃣ 30-seconds-of-code

- Short JavaScript code snippets for all your development needs

🔗 https://t.co/zWcmMtg2xa


4️⃣ Dev Portfolio

- A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass

🔗 https://t.co/DR1fiO7TS9

You May Also Like