プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

GRID入門 CSSでHTMLをレスポンシブ対応にする方法

最終更新日:2019/03/07

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

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

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

まずは、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

合わせて読みたい

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP