User 5842 User 5842 - 4 days ago 4
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

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>

Comments