![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi01.png)
横並びのカードレイアウトってflexとかgridってあるけど、何でやったらいいんだろう?余白とか悩む・・・
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi08.png)
どっちでもできるけど、時代はgridだね
デザインとかあるから一概にはいえないけど、俺はgrid一択だね
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi06.png)
時代はgridっていうのは大袈裟だけど、gridは便利なのは間違いないね
今回はgridを使ったカードレイアウトを解説していくね!
- flexとgridの違い 結局どっちがいいの?
- gridプロパティの紹介
- display: gridまたはinline-gridで、要素をグリッドコンテナにする
- grid-template-columns と grid-template-rows: グリッドの列と行のサイズを指定する
- grid-gap: グリッドアイテム間の余白を指定する
- grid-template-areas: グリッドエリアの配置を指定する
- grid-column と grid-row: グリッドアイテムの開始と終了ラインを指定する
- justify-items と align-items: グリッドアイテムの水平方向と垂直方向の配置を指定する
- justify-content と align-content: グリッドコンテナ内のアイテムの配置を調整する
- grid-auto-rows と grid-auto-columns: 自動配置されるアイテムのデフォルトのサイズを指定する
- gridレイアウトの見本
- トップページなどで見るgridのカード3枚レイアウト
- まとめ
flexとgridの違い 結局どっちがいいの?
まずflexとgridの違いを見てみましょう。
Flexbox
- 1次元のレイアウト(主に行または列)に使用される。
- コンポーネントのレイアウトや単一方向の配置に適している。
- アイテムの順序変更が可能。
- アイテム間のスペースやコンテンツの中央揃えが柔軟に制御可能。
CSS Grid
- 2次元のレイアウト(行と列)に使用される。
- 複雑なレイアウトやマルチカラムレイアウトに適している。
- アイテムの順序変更が可能。
- グリッド内のアイテム配置やスペースの制御が柔軟で高度。
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi01.png)
んーよくわからない・・結局どっちがいいの
?
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi02.png)
そもそもどっちが良いっていうのはないんだ
PCやスマホでの表示、子要素をどう表示させたいかで判断していくといいよ
gridプロパティの紹介
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi02.png)
じゃあ、それぞれのプロパティを使用したサンプルコードを見てみよう
display: gridまたはinline-gridで、要素をグリッドコンテナにする
.container {
display: grid; /* または display: inline-grid; */
}
grid-template-columns と grid-template-rows: グリッドの列と行のサイズを指定する
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 3つの列、それぞれの幅は指定 */
grid-template-rows: 50px 100px; /* 2つの行、それぞれの高さは指定 */
}
grid-gap: グリッドアイテム間の余白を指定する
.container {
display: grid;
grid-gap: 10px; /* グリッドアイテム間の余白を10pxに指定 */
}
grid-template-areas: グリッドエリアの配置を指定する
.container {
display: grid;
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
}
grid-column と grid-row: グリッドアイテムの開始と終了ラインを指定する
.item {
grid-column: 2 / 4; /* グリッドの2列目から4列目まで */
grid-row: 1 / 3; /* グリッドの1行目から3行目まで */
}
justify-items と align-items: グリッドアイテムの水平方向と垂直方向の配置を指定する
.container {
display: grid; justify-items: center; /* グリッドアイテムを水平方向に中央配置 */
align-items: center; /* グリッドアイテムを垂直方向に中央配置 */
}
justify-content と align-content: グリッドコンテナ内のアイテムの配置を調整する
.container {
display: grid;
justify-content: center; /* グリッドアイテムを水平方向に中央配置 */
align-content: center; /* グリッドアイテムを垂直方向に中央配置 */
}
grid-auto-rows と grid-auto-columns: 自動配置されるアイテムのデフォルトのサイズを指定する
.container {
display: grid;
grid-auto-rows: 100px; /* 自動配置されるアイテムのデフォルトの行の高さを100pxに指定 */
grid-auto-columns: 100px; /* 自動配置されるアイテムのデフォルトの列の幅を100pxに指定 */ }
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi03.png)
さすがっす、こんな大量のテンプレ回答まじリスペクトっす
でもよくわかんないんで実物ほしいっす
gridレイアウトの見本
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi04.png)
それでは下記コードのブラウザ表記を見てみましょう
イメージがしやすいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3つの列を均等に分割 */
grid-template-rows: repeat(3, 100px);
/* 3つの行、それぞれの高さを100pxに指定 */
gap: 10px;
/* グリッドアイテム間の余白を10pxに指定 */
}
.item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
![](https://hase-test.com/wp-content/uploads/2024/03/29539f016cbefe75a9346c2486ab77c4-1024x242.png)
トップページなどで見るgridのカード3枚レイアウト
![](https://hase-test.com/wp-content/uploads/2023/10/img_fukidashi02.png)
それでは実際にトップページでよく見るようなカードレイアウトを公開するね
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="riset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card__inner">
<ul class="card__items">
<li class="card__item">
<a class="card__link" href="">
<div class="card__imgWrap">
<div class="card__img">
<img src="https://placehold.jp/dd6503/ffffff/250x250.png" alt="">
</div>
</div>
<div class="card__info">
<h3 class="card__subTitele">タイトル</h3>
<p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="card__btn"><span class="card__more">MORE</span></div>
</div>
</a>
</li>
<li class="card__item">
<a class="card__link" href="">
<div class="card__imgWrap">
<div class="card__img">
<img src="https://placehold.jp/21ba47/ffffff/250x250.png" alt="">
</div>
</div>
<div class="card__info">
<h3 class="card__subTitele">タイトル</h3>
<p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="card__btn"><span class="card__more">MORE</span></div>
</div>
</a>
</li>
<li class="card__item">
<a class="card__link" href="">
<div class="card__imgWrap">
<div class="card__img">
<img src="https://placehold.jp/007bff/ffffff/250x250.png" alt="">
</div>
</div>
<div class="card__info">
<h3 class="card__subTitele">タイトル</h3>
<p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="card__btn"><span class="card__more">MORE</span></div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
@media screen and (min-width: 767px) {
.card__inner {
max-width: 1170px;
width: 100%;
margin-top: -6rem;
position: relative;
z-index: 10;
}
}
.card__items {
grid-template-columns: repeat(1, 1fr);
row-gap: 3rem;
}
@media screen and (min-width: 767px) {
.card__items {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
-moz-column-gap: 2%;
column-gap: 2%;
}
}
.card__imgWrap {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: -4rem;
position: relative;
}
.card__img {
width: 100%;
padding-top: 50%;
overflow: hidden;
position: relative;
}
.card__img img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s;
}
.card__info {
background-color: #efefef;
padding: 8rem 1.5rem 2rem;
}
.card__subTitele {
font-size: 1.9rem;
font-weight: 700;
text-align: center;
}
.card__text {
text-align: center;
font-size: 1.4rem;
margin-top: 1.5rem;
}
.card__btn {
text-align: right;
margin-top: 1rem;
padding-right: 2rem;
}
.card__more {
font-size: 1.6rem;
font-family: "Barlow", sans-serif;
line-height: 1;
}
@media (hover: hover) {
.card__link:hover .card__img img {
transform: scale(1.2);
}
.card__link:hover .card__more .arrowR {
right: 1rem;
}
}
![](https://hase-test.com/wp-content/uploads/2024/03/746410d13ea6954556b77fddc107e984-1024x346.png)
まとめ
Gridは、ウェブページのレイアウトを構築するためにとても便利でしたね。
グリッドの列と行を定義し、要素を配置し間隔や配置を制御し、レスポンシブなデザインが実装できますした。
皆さんもぜひ活用してみてください。