User 5842 User 5842 - 10 months ago 51
CSS Question

HTML Grid Layout with Differing Columns Per Row

I was wondering if someone can give me tips on the best way of achieving the following layout using HTML:

Web Grid

I have tried using regular HTML tables but am having trouble getting the different rows with different columns.

Are there any other grid tools that you all can recommend?

Thanks

Answer Source

Here's an example using divs (hit "Run code snippet"):

* {
  box-sizing: border-box;
}

.row {
  clear: both;
}

.row > div {
  border: 2px solid #000;
  float: left;
  height: 30px;
}

.row-2 > div {
  width: 50%;
}

.row-3 > div {
  width: 33.33%;
  height: 50px;
}
<div class="row row-2">
  <div></div>
  <div></div>
</div>
<div class="row row-3">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row row-2">
  <div></div>
  <div></div>
</div>