CSS グリッドや HTML テーブルを使用せずに Div を複数の行と列にまたがるにはどうすればよいですか?

CSS グリッドまたは HTML テーブルを使用せずに Div を複数の行と列にまたがる方法

多くの場合、要素がまたがるグリッドのようなレイアウトを作成するタスクに遭遇します。複数の行と列。ただし、CSS グリッドまたは HTML テーブルの利用は、望ましいアプローチではない可能性があります。この記事では、非グリッド、非テーブルのソリューションを提供します。

より大きな要素を中央に配置することを目的として、5 つの要素の行を特徴とするスニペットを考えてみましょう。 display: inline-block プロパティを使用すると、水平レイアウトを実現できます:

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

しかし、垂直方向の広がりはどのように処理すればよいでしょうか?

しかし、2017 年に、主要なブラウザーが次のようなアップデートをリリースしました。 CSS グリッド レイアウトを完全にサポートし、簡単なソリューションを提供します。 display:grid プロパティを利用することで、HTML を変更したり、ネストされたコンテナを追加したりせずに、グリッド レイアウトを作成できます。

<code class="css">#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}</code>

要素を複数の行と列にまたがるには、grid-row と Grid-column を使用します。 property:

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

このようにして、HTML テーブルや CSS グリッドに頼ることなく、複数の行と列にまたがる要素を含むグリッド レイアウトを実現します。

以上がCSS グリッドや HTML テーブルを使用せずに Div を複数の行と列にまたがるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。