ウェブデザイナーになりたい（４）Grid layout
（ウェブデザイナーになりたい（３）から引き続き）
Flexboxの次はGrid Layoutです。こちらも初めて学ぶ内容なので、メモを取りつつ進めていこうと思います。
Grid Layoutとは
グリッドレイアウトは、要素を行（rows）と列（columns）で構成されたグリッドの中に配置するレイアウト手法です。CSSのdisplay:gridプロパティを用います。
主な特徴
縦横のレイアウトができる
グリッドは縦（列）と横（行）の両方に要素を配置できる。カスタマイズ性が高い
グリッド内の行や列のサイズ、間隔、配置を柔軟にコントロールできる。レスポンシブデザイン
メディアクエリと組み合わせることで、画面サイズに応じてレイアウトを変更できる。
基本的な使い方
/*html*/
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>/*css*/
.grid-container{
display: grid;
grid-template-columns: repeat(2,1fr); /*列を2つ、等分*/
grid-gap: 10px; /*要素間の間隔*/
}
.item{
background-color: #ccc;
text-align: center;
padding: 20px;
border: 1px solid #000;
}１行目に幅の同じ２つのボックス（１と２）、２行目も同様にボックス（３、４）が並びます。
よく使うコード
grid-template-rows 行のサイズを指定
grid-template-columns 列のサイズを指定
grid-gap グリッド内の間隔を指定。
いまいちflexboxとの使い分けがわからん、と思うのはたぶん初心者だからで。色々と制作していくうちに分かるようになりたい（笑）。
作ってみたもの
（画像をクリックするとWebページに飛びます）
偉人の名前当てクイズです。先日いとこの家に遊びに行ったときに、その息子（小３）から頂いたプリントからネタをもらいました。
学校の宿題かと思いきや、彼の自作とのこと。客人には必ず自作のプリントを解かせる、というおもてなし精神の持ち主でした。
プリントは「この偉人を漢字で書きなさい」というスタイルで、わたしは１問も解けませんでした。クレオパトラなんて書けない。
しかし子どもって、なんか、すごいですね。
かつて大人たちが「君たちの可能性は無限大だ」と言うのに「アホか。そんなの一握りの人間だけだっての」と言い返す（かわいくない）子どもでしたが、今になって「大人からはそう見えたのかもな」とも思います。
可能性は人生の残り時間そのものなのかも。時間をだいじに使いたい。と話が逸れ始めた辺りで終わります。
余談
サンプルサイトのネタを考えるのが苦手なので、ネタや素材を提供してくださる方を募集しようかと考えています。
見ての通り、初心者で大層なページは作れないので、たとえば「食べ歩き記録をインスタにアップしてるけど「今年のベスト３」をウェブページ１ページにまとめてほしい」とか。イメージとしては「友だちの個人サイトを趣味で作ってあげる」という感じでしょうか。
もっと要件をつめて、募集ができればと思います。