CSS Gridレイアウトでコンテンツに合わせてサイズ指定をする方法
HTML&CSS

CSS Gridレイアウトでコンテンツに合わせてサイズ指定をする方法

作成日:2021年05月31日
更新日:2021年05月31日

前回は、Grid レイアウトで Grid エリアを使ってコンテンツを配置する方法を紹介しました。

今回は、Grid レイアウトでコンテンツに合わせてサイズ指定をする方法を紹介します。

基本のコードは、以下になります。

html
<div class="container">
<div class="item item-1">今日の天気は、晴れときどき曇り</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
css
.container {
background-color: #eee;
max-width: 48rem;
height: 24rem;
border: 1px solid #000;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.item {
padding: 1rem;
text-align: center;
color: white;
border: 1px solid black;
}
.item-1 {
background-color: darkgreen;
}
.item-2 {
background-color: darkgrey;
}
.item-3 {
background-color: darkkhaki;
}
.item-4 {
background-color: darkslateblue;
}
.item-5 {
background-color: darkgoldenrod;
}
.item-6 {
background-color: darkred;
}

image2

サイズを固定する方法は、grid-template-rowsgrid-template-columnsに具体的なサイズを指定します。

例えば、横幅のサイズを固定したい場合は、grid-template-columns: 20rem 8rem 20rem;と入力します。

ブラウザで確認すると、

image3

指定したサイズ通りのレイアウトになりました。

コンテンツの最小幅を固定する

文章を、『今日の天気は、晴れときどき曇り。』に戻しておきます。

コンテンツの最小幅を固定するには、min-contentを使用します。

grid-template-columns: min-content 1fr 1fr;に変えてみます。

ブラウザで確認すると、

image4

左端の幅が、可能な限り狭くなりました。

コンテンツの内容を優先して幅を調整する

コンテンツの内容を優先して幅を調整する場合は、max-contentを使用します。

例えば、grid-template-columns: min-content 1fr 1fr;max-content 1fr 1fr;に変えてみます。

ブラウザで確認すると、

image5

文章に合わせてコンテンツが長くなりました。

さらにコンテンツの文章を長くしてみます。

ブラウザで確認すると、

image6

Grid の枠をはみ出してしまいました。

max-contentは、改行せずにどこまでも広がります。

コンテンツの最小・最大サイズを指定する

コンテンツの最小・最大サイズを指定するには、minmax()を使用します。

grid-template-columns: min-content 1fr 1fr;grid-template-columns: minmax(2rem, 20rem) 1fr 1fr;にしてみます。

ブラウザで確認すると、

image7

コンテンツの幅が 20rem まで広がり、文章が改行されました。

minmax関数は、最小値と最大値を指定できます。

書き方は、minmax(最小値, 最大値)です。

minmaxの数値は、autoにすることもできます。

例えば、grid-template-columns: minmax(2rem, auto) 1fr 1fr;に変えてみます。

ブラウザで確認すると、

image8

コンテンツの幅が可能な限り広がり、文章が改行されました。

コンテンツの幅を指定したい場合は、ぜひ試してみてください。

© 2024あずきぱんウェブスタジオ