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 great gradient background sites for every web developer and designer 🎨

🧵👇🏻


1️⃣ uiGradients

- A handpicked collection of beautiful color gradients for designers and developers.

🔗
https://t.co/EainhiePop


2️⃣ Eggradient

- Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends

🔗 https://t.co/F0uYVsZbA4


3️⃣ Mesh Gradients

- Create beautiful gradient like aurora UI in few clicks

🔗 https://t.co/MV8PT7q3Kz


4️⃣ CSS Gradient

- Create beatiful gradeint either linear or radial on different angles

🔗 https://t.co/dlCExilHAT
If you start with the right course then the process becomes a little easier

I found some amazing YouTube videos and courses that will help you start your Web Development journey

🧵👇🏻

HTML and CSS

- A great way to arouse your web dev journey with Gary's (@designcoursecom) course on YouTube

🔗
https://t.co/xjm7nfV2L2


JavaScript

- Although it's impossible to learn JavaScript in 2 hours but JavaScript mastery is one the best YouTube chanel for JavaScript. This 2 hours long crash course will help you start your journey and gives you quick overview.

🔗 https://t.co/1zcSeu4zKE


Git and GitHub

Git is an essential tool. And after learning JavaScript, I think one should go for Git and GitHub. Check out this free great course on Udemy

🔗 https://t.co/E14cibOLXb


React

What you'll learn
- what problems React can solve
- how React solves those problems under the hood
- what JSX is and how it translates to regular JavaScript function calls and objects
- manage state with hooks
- build forms

🔗 https://t.co/3z22aeVQFc

More from Coding

You May Also Like