bblackwind

Posted on Feb 23

Day 17/100: Mastering CSS Grid, Nth-Child Magic, and Text Illusions 🎨🚀

#css #webdev #100daysofcode #beginners

Hey DEV community! 👋 Welcome back to Day 17 of my #100DaysOfCode journey.

If you spend enough time writing CSS, you stop feeling like a developer and start feeling a bit like an architect (or maybe a wizard 🧙‍♂️). Today was all about structural layouts, advanced element selection, and some seriously cool text styling tricks.

Whether you are just starting out or looking to brush up on your frontend skills, here is the technical breakdown of today’s CSS deep dive!

1. The Foundation: Block vs. Inline Elements 🧱

Before getting fancy with grids, we have to understand how elements naturally behave in the browser. Every HTML element defaults to either a Block or Inline display.

[Image of CSS block vs inline elements displaying structural differences]

Block Elements (e.g., <div>, <p>, <h1>): These are the greedy elements. They take up the full width available and always force a new line.
- Benefit: Great for major structural sections (headers, footers, main content areas).
- Disadvantage: You can't naturally place them side-by-side without altering their display properties.
Inline Elements (e.g., <span>, <a>, <strong>): These are the polite elements. They only take up as much width as their content needs and sit peacefully side-by-side.
- Benefit: Perfect for wrapping specific text inside a paragraph without breaking the document flow.
- Disadvantage: You cannot set a specific width or height on them!

/* The Syntax */
.my-block {
  display: block; /* Takes up full width */
}

.my-inline {
  display: inline; /* Wraps tightly around content */
}

2. Advanced Selection: The Magic of :nth-child() 🪄

Why add ten different utility classes to your HTML when CSS can just do the math for you? The :nth-child() pseudo-class allows you to select elements based on their order inside a parent container.

I also explored :nth-last-child(), which does the exact same thing but counts from the bottom up!

The Syntax & Even/Odd Magic:
Want to style alternating rows in a table or a list? You can use mathematical formulas like 2n (for even) and 2n-1 (for odd).

CSS

/* Selects the 3rd item */
li:nth-child(3) { color: blue; }

/* Selects the 2nd item from the bottom */
li:nth-last-child(2) { color: red; } 

/* Selects all EVEN items (2, 4, 6...) */
.box:nth-child(2n) { background-color: lightgray; }

 /* Selects all ODD items (1, 3, 5...) */
.box:nth-child(2n-1) { background-color: darkgray; }

3. Demystifying CSS Grid 🎛️

One huge lightbulb moment today was understanding exactly when to use CSS Grid. While Flexbox is amazing, it is unidirectional (1-Dimensional—it handles either a main axis row OR a column).

CSS Grid is a completely different beast because it is Two-Dimensional. It allows you to build complex layouts defining both rows and columns simultaneously!

CSS

.container {
  display: grid;

  /* Creates 4 columns of specific percentages */
  grid-template-columns: 20% 50% 20% 10%; 

  /* Creates 4 rows of specific percentages */
  grid-template-rows: 30% 50% 10% 10%;
}

Boom. With just three lines of CSS, you have a completely mapped-out grid system ready for your layout.

4. Hands-on Styling: Text Illusions & Flex Shrink ✨

To wrap up the day, I got hands-on with some purely aesthetic tricks:

Text Borders (-webkit-text-stroke): You can outline your text to make it pop against any background.

Background Image on Text: By using background-clip: text; and making the text color transparent, an image will actually show through your text!

flex-shrink: 0;: Have an item inside a flex container that is getting squished when the screen resizes? This is your lifesaver. It tells the browser, "Do not shrink this element, no matter what!"

CSS

.cool-text {
  /* Gives the text a 2px solid border */
  -webkit-text-stroke: 2px #ff4500; 
  color: transparent; /* Makes the inside of the text invisible */
}

.no-squish {
  flex-shrink: 0; /* Prevents flexbox from shrinking this item */
}

Follow the Journey

Want to see the code I'm writing day-to-day? You can check out my repositories on GitHub here:
👉 bblackwind on GitHub --- https://github.com/bblackwind

What's Next?

CSS is proving to be incredibly powerful once you understand the architecture behind the layout systems. I'm excited to combine Grid and these nth-child selectors into a massive project soon!

Are you Team Flexbox or Team Grid? Let me know in the comments below! 👇

Let's Connect!

I'm documenting my entire full-stack journey in public. Follow along, say hi, or check out my other content across these platforms:

💼 LinkedIn: linkedin.com/in/vishal2303

🐦 X (Twitter): @VishalS25630987

👨‍💻 Dev.to: dev.to/bblackwind

📝 Hashnode: hashnode.com/@vishal2303

✍️ Medium: medium.com/@vishal230396

🎥 YouTube: Blackwind Coding School

📸 Instagram: @blackwindcodingschool

DEV Community