現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

今回の記事では、CSSグリッドを使用して画面の幅に応じて列の量を変える方法を紹介します！

CSSのグリッドを使いこなすことで、col-sm-4, col-md-8などを使用して、HTMLを乱雑にしたり、media only screen などを使用する必要性が無くなります。

FlexBoxと一緒でモダンなCSSを書くために覚えておきたい機能です。

Flexboxを習得してモダンなCSSをかけるようにする方法【使い方】

floatメインで配置している方や、Flexboxをプロパティーを調べながらでないと使えない人向けの記事です。Flexboxは、完璧に覚えようとすると大変ですが、少しプロパティーを覚えるだけでも十分便利で、すぐにFlexboxの良さがわかると思います。まず、Flexboxと、プロ...

まずは、gridがどのような機能なのか確認してみましょう。

grid紹介

HTML

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

css

/*gridの適用*/
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 50px;
}
/*CSS 最低限の見た目用*/

.container>div{
  text-align:center;
  border:1px solid;
  margin-bottom:8px;
  background-color: #bae3f9;
}

grid適用前

grid適用後

重要なのはfrです。
fr 単位は、グリッドコンテナー内を自分の好きなように分割することを可能にします。

grid-template-rowsでは、列の高さを指定していて、一列目の高さは80px,二列目の高さは50pxといったように使用します。

frの値を変更して動きをみてみましょう。

grid-template-columns: 1fr 2fr 3fr;

一つのみの幅を固定する場合にはこのようにします

grid-template-columns: 10px 1fr 1fr;

このようにfrを使用するととても簡単にカラムの幅や、高さを使用することが出来ます。

gridを使いこなす上で重要なのがrepeatです

repeat

grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);

repeatは最初のパラメーターで必要な行数を二番目のパラメーターで長さを指定します。

次にauto-fitパラメーターを紹介します。

cssを以下のものに変更してください。

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

grid-gapは行や列の隙間の指定です。
なので、marginなどで微調整に苦労することもなくなります。

今回の場合、auto-fit可能な限り多くの100pxの列をコンテナに収めようとします。
しかし、gridは右側に100px以下の余白を残すことが多いです。

それを修正するのに使うのがminmax()です!

完璧なgridに。minmax()

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

minmax() 関数は、寸法の範囲を min 以上、 max 以下で定義します。

これで完璧にできましたね！

参考
How to make your HTML responsive by adding a single line of CSS

合わせて読みたい

Flexboxを習得してモダンなCSSをかけるようにする方法【使い方】

floatメインで配置している方や、Flexboxをプロパティーを調べながらでないと使えない人向けの記事です。Flexboxは、完璧に覚えようとすると大変ですが、少しプロパティーを覚えるだけでも十分便利で、すぐにFlexboxの良さがわかると思います。まず、Flexboxと、プロ...

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日