MeV
MeV

Reputation: 3958

6 cells 3*2 grid layout with divs

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).

Upvotes: 0

Views: 938

Answers (3)

Praveen Rawat
Praveen Rawat

Reputation: 734

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;
}

Upvotes: 1

braican
braican

Reputation: 2202

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

Upvotes: 2

ray
ray

Reputation: 27265

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>

Upvotes: 2

Related Questions