[訳]CSS Gridレイアウトにご案内します

10135 ワード

前言

3月中旬にCSS開発者にとって重要なニュースがあり、最新版のFirefoxとChromeはすでにCSS Gridという新しい特性を正式にサポートしています.そうですね.私たちは今、最も流行している2つのブラウザでCSS Gridを遊ぶことができます~(≧▽≦)/~

なぜCSS Gridが重要なのか?なぜ注目するの?

CSS GridレイアウトはWebの最初の本格的なレイアウトシステムであるからです.その目的は、コンテンツを行列にして、最終的に開発者が目の前の画面のページの表示効果を高度に制御できるようにすることです.これは私たちがやっと長年の様々なhackとtrickを捨てることができることを意味しています.CSS Gridレイアウトは複雑なレイアウトと美しいレイアウトを可能にするだけでなく、きれいにメンテナンスすることができます.
CSS Gridを使用することで、Web開発はより簡潔になり、開発者に友好的になりました:-D.ではGridはどのように働いていますか?いくつかのチュートリアルは細かくありませんが、私たちは最も基礎的な知識から学ぶべきだと思います.次に、1つのページにアルファベットの列を配置するという比較的簡単な例を実現します.
始める前に、いくつかのラベルを追加します.

<div class="wrapper">
    <div class="letter">
        A
    div>
    <div class="letter">
        B
    div>
div>

まず、font-sizeおよびcolorを使用してこれらのアルファベットのフォントおよび色を設定し、align-itemsおよびjustify-contentなどのflexbox属性を使用して中央に配置します.CSS Gridはflexbox属性を置き換えず、可能な限りそれらの機能を保持している.これらの属性をCSS Gridと組み合わせることもできます.しかし、まずこのdemoに戻りましょう.
上記の例では、大きなdivは、2つのdivを含み、デフォルト属性はdisplay: blockである.次にGrid layoutで親要素を設定します.

.wrapper {
  display: grid;
}

ここで完全なHTMLとCSSコードを置きます.

<div class="wrapper">
  <div class="letter">
    A
  div>
  <div class="letter">
    B
  div>
div>

body,html {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
}

.letter {
  background-color: #0069b3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 70px;
  color: white;
  line-height: 1;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
  font-weight: 200;
  cursor: pointer;
  transition: all .3s ease;
}

次の結果が表示されます.
今は何も変わっていないように見えるかもしれません.どうしてですか.これは、display: inline-block;またはdisplay: inline;を設定するのとは異なり、レイアウトをグリッドレイアウトに設定すると明らかな変化は起こりません.実際、gridを機能させるには、まず正確な行数と列数を設定する必要があります.この例では、2つのアルファベットを並べて並べることができます.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

上のコードを分解しましょう.まずgrid-template-columnsで2列のグリッドを作成しました.もしあなたが以前このようなグリッドを見たことがなければ、1frは変に見えるかもしれませんが、有効なCSSユニットで、各列を私たちのグリッドのほんの一部にすることができます.この例では、2つの列を等幅にすることを意味します.
効果は次のとおりです.
効果を見たら嬉しいでしょう、ははは.しかし、2列の間の黒い線が見えましたか?これはwrapperが描いた各アルファベットdivの背景です.grid-column-gapを1pxに設定したからです.通常、特に隣接する2つのテキストボックスに対して、より大きな距離を設定します.しかし、本例では1pxで十分である.
新しいアルファベットを2つ追加したらどうなりますか?どうやってレイアウトを変更すればいいですか?

<div class='wrapper'>
  <div class='letter'>
    A
  div>
  <div class='letter'>
    B
  div>
  <div class='letter'>
    C
  div>
  <div class='letter'>
    D
  div>
div>

ほら、アルファベットを2文字加えても不思議な効果はありません.2つのアルファベットを加えるのはグリッドにあまり影響しません.なぜですか.2つの列に設定したので、この2つのアルファベットのdivは直接下に置かれ、1frの幅になります.
しかし今私は1つの疑问があって、どうして字母A、Cの间とB、Dの间に1pxの距离がありませんか(′^▽`)grid-column-gapは列だけに使うため、私达はさっきしたのはグリッドの配置の中で1行増加しました.希望する効果を見るにはgrid-row-gapを使用しなければなりません.

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

1行1列のグリッドレイアウトを作成したので、タグを変更しなければなりません.しかし、私たちは今、以下の面白い場所を掘り起こします.grid-template-columnsプロパティに別の値を追加するとどうなりますか?このように:

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

ああ、これで新しい列が追加されましたね.wrapperの背景もはっきり見えます.今は何も表示されていないからです.frを変更すると、非対称のメッシュレイアウトが作成されます.グリッドの最初の列を他の2つの列の3倍にしたい場合は、
これにより、AとDの2つの列の幅が他の2つの列より大きくなります.
面白いでしょう?負の余白やグリッド列の完全なパーセントを心配する必要はありません.以前のように数学で計算するのではなく、複雑なグリッドレイアウトを簡単に作ることができます.grid-template-columnsプロパティに新しい値を追加するだけで、グリッド列が奇跡的に現れます.
それ=応答型グリッドはどのように実現されますか?それは実は簡単です.たとえば、デフォルトでは2列に表示したいのですが、画面が500 pxの場合は3列に表示したいのですが、画面がもう少し大きい場合は4列にします.このように書くだけです.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

コンピュータで新しいウィンドウで次のDemoリンク-Demoを開くことができることを確認して、ブラウザのウィンドウのサイズを変えて、応答式の効果を見てみましょう.grid-template-columns属性は、本明細書で示すよりも複雑であるが、本明細書は良い出発点である.次にCSS Gridにおける真の革命的意義の属性を学習する:grid-template-rows次のコードを見て、私たちが学んだ知識と結びつけて、この新しい属性が何ができるかを理解します.

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

行の高さの関係を設定できます.前の行の高さを1frに設定すると、最後の行は3frに設定されます.これは、2行目の行の高さが1行目の3倍であることを意味します.
これは簡単に見えるかもしれませんが、私たちは本当にそれをしたことがありません.特定の要素に最小の高さを設定したり、クラス名を変更したりしなければなりません.私たちはこれまでこのような方法で行間の関係を作成したことがありません.これがCSS Gridの強みです.
これらの小さな知識といくつかの新しい属性があれば,非対称メッシュと応答型メッシュは氷山の一角にすぎない非常に複雑なレイアウトを作成することができる.これまでCSS Gridの初探査にすぎなかったが、まだ言及されていないことが多い.でもJen SimmonsはGridを書くときに一番いいと思います.
私たちはCSS Gridをずっと探求して、それがやりたいことが何なのかを明らかにするまで、それは無理に何をすることができて、それは何もできません.デザイナーはCSSのコードを学ぶことはできないかもしれませんが、CSSを十分に理解してこそ、私たちの芸術メディア(artistic medium)をよりよく理解することができます.
もちろん、上のコードは最初は変に見えます.しかし、私たちは肥大化したCSSフレームワークを使う必要はありません.煩雑なレイアウトを気にする必要はありません.これがCSS Gridが本当に私を興奮させた場所で、インタフェースの表示を新しい方法で見ることができます.
私たちは新しい属性をたくさん学ぶだけでなく、私たちが以前学んだことを考え直す必要があります.だからCSS Gridは規範だけでなく、それ自体が奇妙な哲学です.
一緒に探求しましょう.

ブラウザのサポート:

緑は、リストされているバージョン(以上)の完全なサポートを示します.黄色は部分的にサポートされています.赤はサポートされていないことを示します.完全なブラウザサポートの詳細については、Caniuseを参照してください.

[訳]CSS Gridレイアウトにご案内します

前言

なぜCSS Gridが重要なのか?なぜ注目するの?

ブラウザのサポート:

関連ラーニングリソースリンク: