CSS 3 расположение столбцов

Question

Layout Link Здравствуйте, Я хотел бы создать макет в CSS и HTML, как показано на рисунке.

Я пробовал несколько вещей и искал в Интернете, но я не могу найти решение для своего макета. Сначала я пробовал с

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

Для первой строки это должно работать. Но для второго я могу использовать только:

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

, но я не хочу быть обоими столбцами 50%. Я бы хотел, чтобы первый так долго, как первые два в первой строке.

Есть ли возможность выполнить эту задачу?

Answer 1

Вот один из способов достижения этой

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

Answer 2

Лучший способ добиться этого макета бы с помощью рамки 960 Grid. Это отличная каркас и специально для таких целей. Эта рама сделает вашу работу в сто раз проще.

Вот ссылка: 960 Grid Framework

Вот короткий Youtube плейлист учебник о том, как использовать систему 960 сетки: How to use 960.gs