Ashraf mag dev

🔥 CSS just got smarter!

A new CSS draft (Conditional Rules Level 5) introduces features that make responsive design way easier:

You can now use and to write CSS that behaves like logical conditions.

Container Queries are improved — meaning elements can change style based on the size of their parent, not the whole screen!

More powerful checks (like fonts and browser features).

New container-based sizing units like cqw, cqh, cqmin etc.

This means better layouts, more reusable components, and fewer CSS hacks.
It's still in draft, but it's the future of responsive CSS. 🚀

How Subgrid Solves a Super Common Layout Issue 👇

Ever built cards or lists where the content just doesn’t line up?

Like pricing cards, blog cards, or product grids.

You try Flexbox. Looks fine... until you realize:

One card is taller than another

Columns don’t align

Everything feels messy

Why? Because Flexbox doesn’t let one card “know” what’s inside another.

Subgrid fixes that.

🧱 Step 1: Define the parent grid
blog-grid {
display: grid;
grid-template-rows: 200px repeat(4, auto);
}

Or whatever structure you'd like all the items to follow.

📦 Step 2: Make each item span the parent
blog-card {
grid-row: 1 / -1;
}

So each item stretches across all the rows.

🧩 Step 3: Use subgrid inside
blog-card{
grid-template-rows: subgrid;
grid-row: 1 / -1;
}

Now each child item inherits the parent’s rows. Same tracks, same rules, perfect alignment.

🎯 Bonus

You can even change the gap inside:
blog-card {
grid-template-columns: subgrid;
gap: 15px;
}

✅ And that’s it.

Subgrid gives shared awareness between grids. Cleaner, simpler layouts.

📊 Browser support: about 90%. So unless you’re using Internet Explorer, you’re good.

Website Design Structure.
🌈 ✅ 🧑‍💻 ✨