Skip to content

Preethi-Dev/modern-layouts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 

Repository files navigation

Modern Layouts

Modern layouts strengthen skills in thinking of complex grid layouts with a responsive nature. I used various native CSS Grid techniques. The ASCII-Art Method and the Named grid line technique tempted me to develop around 50 modern layouts. In fact, I wrote a dedicated article for the ASCII-Art Method at CSS-TRICKS (It received significant attention from fellow developers and was even featured as "POPULAR OF THE MONTH).

50 days challenge on Modern Layouts using CSS Grid.

Modern Layouts - 01/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use a 12-column grid layout
✅ Responsive to each breakpoint

Modern Layouts - 02/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use a 12-column grid layout
✅ Responsive to each breakpoint
✅ Placing items using Named Template Areas

Modern Layouts - 03/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Line-based placement
✅ Responsive to each breakpoint
✅ Using the power of Grid Auto-Placement Rule

Modern Layouts - 04/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line-based placement
✅ Responsive to each breakpoint

Modern Layouts - 05/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint

Modern Layouts - 06/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid for desktop Breakpoint
✅ Use an 8-column grid for Large Tablet and Laptop Breakpoint
✅ Use a 4-column grid for Mobile Breakpoint

Modern Layouts - 07/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 08/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Template Area Placement
✅ ASCII-ART method of grid layout
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 09/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Line-based placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 10/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Line-based placement
✅ Responsive to each breakpoint

Modern Layouts - 11/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 12/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Template Area Placement
✅ ASCII-ART method of grid layout
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 13/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Line-based placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 14/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 15/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line Based Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 16/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

❌ No Absolute or Relative positioning
✅ Use Line-based placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 17/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line-based placement
✅ Responsive to each breakpoint
✅ Use the power of Grid Auto Placement Rule

Modern Layouts - 18/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line-based placement
✅ Responsive to each breakpoint
❌ No Absolute or Relative positioning

Modern Layouts - 19/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines placement
✅ Responsive to each breakpoint
❌ No Absolute or Relative positioning

Modern Layouts - 20/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use FlexBox
✅ Responsive to each breakpoint
❌ No Absolute or Relative positioning

Modern Layouts - 21/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line Based placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid layout
❌ No Absolute or Relative positioning

Modern Layouts - 22/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use FlexBox
✅ Responsive to each breakpoint

Modern Layouts - 23/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid
❌ No Absolute or Relative positioning

Modern Layouts - 24/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Template areas Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid
❌ No Absolute or Relative positioning

Modern Layouts - 25/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use a 12-column grid
✅ Responsive to each breakpoint

Modern Layouts - 26/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use ASCII ART METHOD of CSS Grid
✅ Responsive to each breakpoint
✅ Use a 12-column grid
❌ No Absolute or Relative positioning

Modern Layouts - 27/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line Based Placement
✅ Responsive to each breakpoint
✅ Use Single Column grid
❌ No Absolute or Relative positioning

Modern Layouts - 28/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use a 12-column grid
✅ Responsive to each breakpoint

Modern Layouts - 29/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Responsive to each breakpoint

Modern Layouts - 30/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use the power of Grid's Auto Placement Algorithm.
✅ Responsive to each breakpoint

Modern Layouts - 31/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use FlexBox
✅ Responsive to each breakpoint
❌ No Absolute or Relative positioning

Modern Layouts - 32/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use 12-column grid
✅ Responsive to each breakpoint

Modern Layouts - 33/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use 12-column grid
✅ Responsive to each breakpoint

Modern Layouts - 34/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Single Column Grid
✅ FlexBox Enriched Layout
✅ Responsive to each breakpoint

Modern Layouts - 35/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 36/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 37/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line Based Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 38/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Line Based Placement
✅ Responsive to each breakpoint
✅ Use 12-column grid

Modern Layouts - 39/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 40/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 41/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use FlexBox
✅ Responsive to each breakpoint
❌ No Absolute or Relative positioning

Modern Layouts - 42/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use the power of Grid's Auto Placement Algorithm.
✅ Responsive to each breakpoint

Modern Layouts - 43/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Responsive to each breakpoint

Modern Layouts - 44/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid line-based placement
✅ Use a 12-column Grid
✅ Responsive to each breakpoint

Modern Layouts - 45/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 46/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid Line Based Placement
✅ Use a 12-Column Grid.
✅ Responsive to each breakpoint

Modern Layouts - 47/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 48/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use Named Grid Lines Placement
✅ Responsive to each breakpoint
✅ Use a 12-column grid

Modern Layouts - 49/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid Line Based Placement
✅ Use a 12-column grid.
✅ Responsive to each breakpoint

Modern Layouts - 50/50 (#Made-In-CSS-Grid)

Source Code - Live Preview

screenshot

✅ Use CSS Grid Line Based Placement
✅ Use a 12-Column Grid.
✅ Responsive to each breakpoint

About

50 Extremely Modern Layouts Using CSS Grid✨

Resources

Stars

Watchers

Forks