CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 251

CSS 3 column layout

Layout LinkHello, I would like to create a Layout in CSS and HTML as shown in the picture.

I have tried several things and searched the internet but I can not find a solution for my Layout. At first I tried with 

div{
  width: 100%;
  column-count: 3;
  column-rule-color: red;
  column-rule-width: 8px;
  column-rule-style: solid;
 }

For the first row this should work. But for the second I can use only:

    div{
      width: 100%;
      column-count: 2;
      column-rule-color: red;
      column-rule-width: 8px;
      column-rule-style: solid;
     column-width: 50%;
}

but I dont want to be both columns 50 %. I would like the first so long how the first two in the first row.

Is there a possibility to accomplish this task?

Upvotes: 0

Views: 66

Answers (2)

Rasik
Rasik

Reputation: 903

The best way to accomplish that layout would be by using the 960 Grid framework. It is a great framework and is especially made for such purposes.This framework will make your job a hundred times easier.

Here's the link : 960 Grid Framework

Here a short Youtube playlist tutorial on how to use the 960 grid system : How to use 960.gs

Upvotes: 1

Asons
Asons

Reputation: 87303

Here is one way to accomplish that

.row {
  display: flex;
}
.row div {
  border: 1px solid;
  height: 30px;
  margin: 5px;
}
.row:nth-of-type(1) div {
  width: 33%;
}
.row:nth-of-type(2) div:first-child {
  width: calc(66% + 10px);
}
.row:nth-of-type(2) div:last-child {
  width: 33%;
}
.row:nth-of-type(3) div {
  width: 100%;
}
<div class="row">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
</div>

Upvotes: 0

Related Questions