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

最初の行については、これがうまくいくはずです。しかし、2番目の私は使用することができます：

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

しかし、私は50％の両方の列になりたくありません。私は、最初の行の最初の2つの方法がどれほど長いか最初に思います。

このタスクを実行する可能性はありますか？ここで

Answer 1

は、そのレイアウトを達成するための最良の方法は、960グリッドフレームワークを使用することによりだろう

.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

ことを達成する一つの方法です。 これは素晴らしいフレームワークであり、特にそのような目的のために作られています。このフレームワークは、あなたの仕事を100倍簡単にします。

ここのリンクです：960 Grid Framework

ここでは960グリッドシステムの使用方法についての短いYouTubeのプレイリストチュートリアル： How to use 960.gs

は、