2つのdivを並べて表示する3つの方法（フロート、フレックスボックス、CSSグリッド）

flexboxを使用すると、2つのdiv要素をより直感的に配置できます。

HTML：

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS：

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

flexboxでは、display: flexを設定しました 親の.flex-container エレメント。これにより、フレックスボックスがオンになります。

次に、各.flex-childで 要素、flex: 1を設定しています 。この数値は、親フレックス要素の各子の幅を比較した比率のようなものです。

それらは同じであるため、使用可能なスペースは均等に分割されます。また、子要素が2つあるため、それぞれが50％を占めます。

結果のコードは次のようになります。

マージンを使用してdiv間にスペースを追加しても、それでも収まります！

margin-right: 20pxを追加してスペースを追加したことに注意してください 最初の.flex-childだけに エレメント。ただし、flexboxは、残りの使用可能な幅を分割するときに、その余分な20pxを考慮に入れるのに十分インテリジェントです。

これは、正確なピクセルを計算しなくても、マージンのあるスペースを追加できることを意味します。 Flexboxはあなたにぴったりのコンテンツになります！

これが、フレックスボックスが大好きな大きな理由の1つです。

ただし、レスポンシブグリッドにレイアウトする要素が複数ある場合は、要素間にそのスペースを追加する必要がある場所が常にわからない場合があります。

この場合、モバイル用に2つのdivを上下にスタックする場合は、そのmargin-rightを削除する必要があります。 モバイル幅のプロパティ。

または、.flex-childごとに外部要素とパディングを追加することもできます。 要素。floatメソッドで行ったのと同様です。

100％直感的ではありませんが、それでも機能します。フレックスボックスを使用してより複雑なレスポンシブレイアウトを作成する必要がある場合は、これを覚えておく必要があります。

次に、divを並べて配置するために使用できる最新の方法であるCSSグリッドを見てみましょう。

CSSグリッドメソッド

そして、CSSグリッドを使用して2つのdivを並べて配置する方法は次のとおりです。

HTML：

<div class="grid-container">

    <div class="grid-child purple">
        Grid Column 1
    </div>

    <div class="grid-child green">
        Grid Column 2
    </div>
  
</div>

CSS：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

コードは次のようになります：

グリッドの大きな変更点の1つは、最初にグリッドテンプレートがどのように表示されるかを決定することです。レイアウトに必要な列や行の数を意味します。

この場合、同じ幅の2つの列が必要です。したがって、親の.grid-container 要素、display: gridでグリッドをオンにします 。次に、grid-template-columnsを使用して、レイアウトに必要な列数を追加します。 プロパティ。

同じ幅の2つの列が必要なので、1fr 1frに設定します。 。これにより、ブラウザに2列のレイアウトを作成するように指示され、各列は1frを占めます。 （fr =分数単位）のスペース。

fr単位は、flex: 1と同様に、各列と別の列の比率です。 フレックスボックスメソッドで使用したルール。列を1fr 1frに設定する これは、各列が同じ量のスペースを占めることを意味します。