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

  1. フロントエンド
  2. 376 view

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.
WINDII

WINDII

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

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

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

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

PAGE TOP