25 Extremely Modern Layouts Using CSS Grid✨
Tags: showdev, css, github, webdev
Published: 2022-07-20 11:45:00

Hey There👋🏽, it's really after a long time writing an article. I spent more than a couple of months on intense research of CSS Grid. More advanced techniques are added in CSS Specification which makes our life easier. 

I developed 25 extremely modern layouts made on **CSS Grid and Flexbox**.

### Do yo Know??

✅ Every Layout following **Mobile First Approach**.

✅ Responsive to all breakpoints.

❌ No Absolute or Relative positioning used.

✅ Only use CSS Grid techniques. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2emlkgmtywa169e2iiv7.jpg)

### Not Showcasing Only, For Practicing also

Hey, This 25 layout make a best practice for modern layouts from beginner to advanced level. 

For Every layout, I list GitHub link🔗 and Preview Link🔗.


*Design Credits to [Marko Jotic](https://www.linkedin.com/in/markojotic/)* and get it on [Gumroad](https://joticmarko.gumroad.com/l/fontsandlayouts)

---

##3 steps to practice this modern layout

✅**Step 01** - Fork the repo.
✅**Step 02** - Understand the HTML Grouping and CSS Layout technique used.
✅**Step 03** - ReCreate the layout on your own .

--- 

##Layout 01 
| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-01)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-01/) |

![Layout 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwri5wx09r501cw52te7.png)

##Layout 02

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-02)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-02/) |

![Layout 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i532de72zm4twso59p5d.png) 

##Layout 03

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-03)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-03/) |

![Layout 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yby1tk8liihapck8hrw3.png)

##Layout 04

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-04)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-04/) |

![Layout 04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bico0ztuqcg2y6kpvtnj.png)

 
##Layout 05

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-05)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-05/) |

![Layout 05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33be9nairlrvaaoxaxla.png) 


##Layout 06

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-06)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-06/) |

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2ipzdk3rinbt6s6hwcp.png) 

##Layout 07

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-07)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-07/) |

![Layout 07](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63kcuu7i24o71bz56gjk.png) 


##Layout 08

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-08)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-08/) |

![layout 08](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi9vkwkek8v9c0xo44da.png) 

##Layout 09

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-09)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-09/) |

![layout 09](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jg109r5tqsk0s9l5558a.png) 

##Layout 10

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-10)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-10/) |

![layout 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uguf6vdlewhlruabugty.png) 

##Layout 11

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-11)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-11/) |

![layout 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkwdy28vo5qylz3j5anz.png) 

##Layout 12

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-12)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-12/) |

![layout 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alhde3vtqfnqe1fh0w32.png) 

##Layout 13

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-13)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-13/) |

![layout 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xte9pjhwmpjlcxk1b691.png) 

##Layout 14

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-14)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-14/) |

![layout 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovgd667kydt00ex0bwer.png) 

##Layout 15

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-15)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-15/) |

![layout 15](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5u5zdgyt8oxw814ep4h.png) 

##Layout 16

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-16)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-16/) |

![layout 16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdxzih2agi0xphjt4l29.png) 

##Layout 17

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-17)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-17/) |

![layout 17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d57p8x3i92i5i0x951el.png) 

##Layout 18

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-18)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-18/) |

![layout 18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmbceqvmecn023pjo8on.png) 

##Layout 19

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-19)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-19/) |

![layout 19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94fxejm5qkywgcbjyfw5.png) 

##Layout 20

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-20)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-20/) |

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcbfdj8tcs0cznkhohfr.png) 

##Layout 21


| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-21)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-21/) |

![layout 21](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88pzihlne2b9hdgnqoer.png) 

##Layout 22


| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-22)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-22/) |

![layout 22](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngrl8etydrwyjtnkprlf.png) 

##Layout 23

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-23)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-23/) |

![layout 23](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sra5rora4qdn14w7x9hx.png) 

##Layout 24

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-24)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-24/) |

![layout 24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upecsx3ncvw3qshjoouj.png) 

##Layout 25

| [GitHub Link](https://github.com/Preethi-Dev/Modern-Layout-25)  | [Preview Link](https://preethi-dev.github.io/Modern-Layout-25/) |

![layout 25](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjvpc6qwy74r1vkvsnjd.png) 

---

Practice make a perfect layout!!

### Find Me on [**GitHub**](https://github.com/Preethi-Dev) [**Twitter**](https://twitter.com/Preethi39195942)