DEV Community

bblackwind
bblackwind

Posted on

I fought with CSS layouts for years. Then I found CSS Grid. 🤯 (Day 18)

#100daysofcode #beginners #webdev #css

If you’ve ever found yourself fighting with floats, battling absolute positioning, or writing endless media queries just to get a decent web layout... I feel your pain.

Welcome to Day 18 of my #100DaysOfCode journey! Today, I finally dove deep into CSS Grid, and honestly? It feels like cheating. I built two complete webpage designs using just Grid.

If you are still struggling with web layouts, here is the exact breakdown of the magic spells (properties) I learned today.

1. The Foundation: display: grid;

Before Grid, aligning items was a chore. Now, we just explicitly define the "skeleton" of our webpage.

.container {
  display: grid;
  /* Two columns, 50% width each */
  grid-template-columns: 50% 50%; 
  /* Four rows with specific heights */
  grid-template-rows: 100px 200px 500px 80px; 
}
Enter fullscreen mode Exit fullscreen mode

2. Say Goodbye to Math with fr

Percentages are okay, but the fractional unit (fr) is your best friend. It represents a fraction of the leftover space.

CSS
.grid-container {
  display: grid;
  /* Divides available width into 3 equal parts (33.33% each) */
  grid-template-columns: 1fr 1fr 1fr; 
}
Enter fullscreen mode Exit fullscreen mode

3. Ultimate Responsiveness: minmax()

This is easily my favorite discovery. Built-in responsiveness without writing a single @media query!

CSS
.responsive-grid {
  display: grid;
  /* Column 1 is 100px. Column 2 is AT LEAST 200px, but grows to fill remaining space */
  grid-template-columns: 100px minmax(200px, auto);
}
Enter fullscreen mode Exit fullscreen mode

4. Breathing Room: Gaps

No more weird margin hacks and collapsing margin headaches.

CSS
.spaced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  row-gap: 20px; 
  column-gap: 30px; 

  /* Or just use the shorthand! */
  gap: 20px 30px; 
}
Enter fullscreen mode Exit fullscreen mode

Learning Grid today was a massive level-up. Building layouts feels incredibly intuitive now.

Drop a comment below: What is your favorite CSS Grid trick? 👇

Let's connect and build! 💻
🐙 GitHub: bblackwind

💼 LinkedIn: Vishal Singh

🐦 X (Twitter): @VishalS25630987

🎥 YouTube: Blackwind Coding School

📸 Instagram: @blackwindcodingschool

✍️ Hashnode: @vishal2303

👩‍💻 Dev.to: @bblackwind

📖 Medium: @vishal230396

Top comments (0)