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
Do not write CSS code, use these free generators instead that can help you immensely

A Thread 🧵

1️⃣ Stripes generator

- Pure CSS Stripes Generator that you can use for backgrounds.

🔗
https://t.co/5uTPrwA5xD


2️⃣ Gradient generator

- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

🔗 https://t.co/Yr6pueoWgx


3️⃣ Pattern generator

- It lets you create background pattern for free

🔗 https://t.co/NQuV7pxLIz


4️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

🔗 https://t.co/x0qaDhN0z9
You can learn 90% of CSS using these 10 threads

🧵👇

1. All you need to know about CSS


2. Getting started with CSS animations


3. Z-index is tricky but this thread solve all your doubts


4. CSS positioning concepts
Use these 6 AI websites to finish hours of work in minutes (take a look):

1. Sheet+

Become a spreadsheet master with Sheet+ AI-powered tools.

• Convert text to formula
• Convert formula to explanation
• Debug formulas
• Generate VBA code
• Get instant answers to any spreadsheet question

🔗
https://t.co/fWsAeKa6ko


2. DeepCode

DeepCode's AI-based code review notifies you about critical bugs in real time and shows you how to fix them.

🔗 https://t.co/dPTPq9syoy


3. Akkio

Grow your business with data-driven decisions.

Go from data to AI in 10 minutes — no code or data science skills required.

🔗 https://t.co/I29FIHDIs0


4. Autocode

Instant endpoints for webhooks, bots, and APIs.

Build and host Node.js endpoints in seconds.

Connect to your favorite APIs like Airtable, Discord, Notion, Slack, Webflow, and more.

🔗 https://t.co/uQZB0NCHJT
Five great icons websites for every web developer and designer ⏺️

A Thread 🧵👇🏻


1️⃣ Icons 8

- Icons8 is just more than icons. You can download illustrations, vector images, music and much more

🖇️
https://t.co/inHse0QXBh


2️⃣ Icon Monstr

- Black and white themed minimal icons which looks super great. You can also cuatomize the thickness

🖇️ https://t.co/dbQrJi0IHf


3️⃣ Icon Icons

- Over one thousand free icons which you can download as icons or images

🖇️ https://t.co/h5NlH5fGGr


4️⃣ Icons finder

Filter through the world’s largest marketplace for icons with flexibility and ease. Made up by submissions from top designers around the world, and curated by the team

🖇️ https://t.co/sqiZ6H9sR7

More from Coding

These 5 visualizers will help you learn data structures and algorithms up to 10 times faster

Thread 🧵👇🏻

1⃣
https://t.co/H2sKWKEeaz

- Learn DSA and visualize some complex programs. Definitely check it out.


2️⃣ https://t.co/0WcFTWBfh9

- Dedicated to graph DS


3️⃣ https://t.co/ShEQQkjtWD

- Visualizing data structures and algorithms through animation


4️⃣ https://t.co/XxzwBa3vvZ

- All sorting algorithms animations

You May Also Like