0

Is it possible to create grid layouts with display: table without nested divs?

<div id="container">
 <div id="article1">
 <div id="article2">
 <div id="article3">
 <div id="article4">
 <div id="article5">
 <div id="article6">
</div>

The result should be for example a 3x2 table. If I apply display: table-cell to the article divs I get them all in a row. I assume there is no possibility to create a new row after 3 divs without nesting them in HTML?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
0711master
  • 187
  • 4
  • 13

1 Answers1

0

It's better to use flexbox model instead, like this:

#container {
  display: flex;
  flex-wrap: wrap;
}

#container>div {
  width: 33.3%;
  flex-shrink: 0;
}

Check the example here - on the codepen.

So no need in additional div tags

  • @0711master why not to use floats and width: 33.3% ? It's better than tables too. It's supported since IE6 –  Feb 12 '18 at 18:13
  • Because floats are not made for layouting like this and the advantage of table cell is that they all have the same height and adapt if one is getting higher... – 0711master Feb 12 '18 at 19:01
  • @0711master Flexbox is supported in [all current versions of all major browsers](https://caniuse.com/#search=flexbox). Make it degrade gracefully for the random IE6 user and be done with it. – ceejayoz Feb 12 '18 at 19:21
  • Yes, but the problem with flexbox is also this: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – 0711master Feb 12 '18 at 19:49
  • @0711master You're not using Flexbox because of a *solvable* problem? Implement one of the *twenty five* answers on that page. – ceejayoz Feb 12 '18 at 21:00
  • Officially it's not solvable, only through hacks. Also most of the solutions use flex-start und not space-between as the question creator requires. The only good solution with :after is putting extra content, but also if the the last row has the full amount of elements - this causes the divs to move to the left. – 0711master Feb 12 '18 at 22:05