くまだどうも、くまだ です。
カード型レイアウトコンテンツのコーディングについて過去に書いているのですが、
最近は上の記事のやり方ではなくdisplay: grid;を使ってやっています。（今回のメイン）
なお、円に並べるやり方はこちらです。
カード型レイアウトについて
過去記事でも載せましたが、カード型レイアウトとは以下のような配置のやつです。
Webサイトでよく見かけるような配置です。これがリンクになってたり、ブログ記事の一覧だったりなどの配置があります。
カード型配置でやりがちな失敗例
ちなみにflexのやり方で上記画像の配置にするコーディングだと、こんな感じで簡単に配置ができます。
<body>
<div class="container">
<div class="inner">
<div class="box">
<p>1</p>
</div><!-- /.box -->
<div class="box">
<p>2</p>
</div><!-- /.box -->
<div class="box">
<p>3</p>
</div><!-- /.box -->
<div class="box">
<p>4</p>
</div><!-- /.box -->
<div class="box">
<p>5</p>
</div><!-- /.box -->
<div class="box">
<p>6</p>
</div><!-- /.box -->
</div><!-- /.inner -->
</div><!-- /.container -->.container{
width: 100%;
}
.inner {
width: 60%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin: 40px auto;
}
.box {
display: flex;
width: 32%;
height: 300px;
margin-bottom: 20px;
background: lightcoral;
text-align: center;
}
.box p {
margin: auto;
font-size: 24px;
}これをブラウザで表示してみると、上記の画像のようなレイアウトになります。
flexはめちゃくちゃ使いやすい便利なものなんですが、例えば上の記述だと、この6つのコンテンツが2つになったり5つになった場合にはこんな配置になってしまいます。
2つのパターン
5つのパターン
必ずしも綺麗にコンテンツの数が揃うとは限りません。コンテンツが増えたり、減ったりするパターンも想定すると、上のような2つのとき、5つのときになるとレイアウトが崩れてしまいます。これだと改めて調整が必要になってきます。
デザインカンプでよく見かけるカード型のアイテムが3つ横に並んでいるのが多いです。それを素直にコーディングすると、アイテムが減ったり増えたときにレイアウトが崩れるという失敗をやりがち。（なので上のやつはダメなパターン）
gridレイアウト
display: grid;使った場合は下記になります。
<div class="container">
<div class="box-item">
<div class="box">
<p>1</p>
</div>
<div class="box">
<p>2</p>
</div>
<div class="box">
<p>3</p>
</div>
<div class="box">
<p>4</p>
</div>
<div class="box">
<p>5</p>
</div>
<div class="box">
<p>6</p>
</div>
</div>
</div>@charset 'utf-8';
.container{
width: 100%;
}
.box-item {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
margin: 40px auto;
}
.box {
display: flex;
width: 100%;
height: 300px;
background: lightcoral;
text-align: center;
}
.box p {
margin: auto;
font-size: 24px;
}
flexやcalcを使ったみたいにきれいに配置できます。また、アイテムが減ったり増えたりしても配置は維持されたままになります。
〇 アイテム少ないパターン
〇 アイテム4つ（折り返し）パターン
gird使いだしてからこっちのほうが楽だし、記述量も減ります。
ここまで読んでくださりありがとうございました。