6 cells 3*2 grid layout with divs

Question

I am wondering what is the best way to create this 3*2 "table" using DIVS?

simple 3*2 grid layout

I am really tempted to use simple tables code

<table>

as it would be easier, but the trend today is to use Divs. Therefore, what would be the best, elegant way to create something like this?

I always wondered why tables suddenly disappeared, I used to create websites using only tables (time ago).

If you're displaying tabular data (like you'd find in a spreadsheet) then absolutely use a table. For layout and design, divs are the way to go. — wicker95, May 28 '15 at 17:04
Use CSS styles to simulate a table. Unless it's a data grid, in which case use a table. — Mr Lister, May 28 '15 at 17:05
Andrew is asking the right question, what's going in there? If it's actual data which needs to be formatted,.. like well a table, then go with that! Forget trends, be practical. — Antonio Pavicevac-Ortiz, May 28 '15 at 17:07
I wouldn't follow trends, but just consider function and base my choice upon that. — user2314737, May 28 '15 at 17:10
@Andrew Thanks for the message. There will be website content (images and structure for the website) therefore I think i should use divs and not table. — MeV, May 28 '15 at 17:10
@wicker95 Thanks, I agree with you, totally, but I noticed developers hating tables nowadays, as if they were used only for old technology websites.. — MeV, May 28 '15 at 17:14
@user2314737, same here. But still, I feel that tables looks too old today. Thank you — MeV, May 28 '15 at 17:15
@MaRco85 Now you're seriously underestimating tables. Tables are wonderful, versatile, multi-purpose things that have gotten an undeserved bad rep in the last few years, and I really don't know why. I've seen people go so far as to invent new tag names that they style with CSS, just to avoid writing `` in their source. So wrong. Anyway, if you want to structure your website, I presume with things like side bars and the like, don't use tables. Use something responsive, like inline or floating blocks. — Mr Lister, May 28 '15 at 17:59
There's nothing wrong with using `` when you are, in fact, creating a table. The only reason people say "use
instead of
" is because people used to format everything using
. You are a creating a table, so use `
`.
I will admit that my first reaction to seeing tables used in HTML is usually bad, but there are valid uses. Search results with a lot of attached data points? Great use. Menu bars on top of the page? Bad example. There's a time and place, and we should all be careful about knee jerk reactions. — wicker95, May 29 '15 at 11:49
"There's nothing wrong with using when you are, in fact, creating a table." sorry @andy-lester , but this made me smile — user2314737, May 29 '15 at 12:01

score 2 · Accepted Answer · answered May 28 '15 at 17:03

2

Simplest answer:

div {
  width: 33%;
  float: left;
  border: 1px solid black;
  height:100px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

answered May 28 '15 at 17:03

ray

26,557
5
28
27

it's actually very simple. I didn't think about the 33% and I was wondering how to break the line after 3 divs... nice thanks! – MeV May 28 '15 at 17:08
2

Note that this will break if the container is smaller than 600px wide because of the border. You can avoid it with `box-sizing:border-box;` – web-tiki May 28 '15 at 17:28

score 2 · Answer 2 · answered May 28 '15 at 17:11

If you can get away with only having to support IE10+, you can use flexbox:

*,*:before,*:after{
  box-sizing: border-box;
}
.container{
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width: 33.33%;
  height: 100px;
  border: 1px solid black;
}

<div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

pen here if you want to play around with it - http://codepen.io/braican/pen/QbdbYb

Thank you! It's surely a good solution, cross-browser but I think the other one looks more professional (elegant). Thanks anyway! :-) — MeV, May 28 '15 at 17:18

score 1 · Answer 3 · answered May 28 '15 at 17:28

1

you can also use https://jsfiddle.net/ftwn8q7w/1/

<div class="raw">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="raw">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

.raw{
     display:table;
    width:100%;
}
.col{
    display:table-cell;
    border:1px solid;
    height: 100px;
}

answered May 28 '15 at 17:28

Praveen Rawat

724
2
12
29

1

That won't preserve the widths of the columns. – Mr Lister May 28 '15 at 18:03

6 cells 3*2 grid layout with divs

3 Answers3