ブログデザイン備忘録～ gridを用いたレイアウト2

　今回はCSSのGridを用いた12カラムのグリッドレイアウトについて紹介していきたい。12カラムのグリッドレイアウトで左右比で2:3となるようなレイアウトについて紹介していく。

atatat.hatenablog.com

今回見基本的なコードは下記記事のものを用いて、最低限レイアウトを構成する必要なコードだけに絞った。

htmlはcontainerの中にclass名:item-1, item-2として、それぞれSub panel, Main panelとしておく。

<body>
    <div class="container">
      <div class="item-1">Sub panel</div>

      <div class="item-2">Main panel</div>
    </div>
</body>

CSSに関してbodyは前回と同じ。12カラムにするには grid-template-columns: repeat(12, 1fr);として、さらにcolumn-gap: 12px;とするとSub panelとMain Panelに12pxのギャップを設けることができる。

body {
  margin: 0 auto;
  max-width: 1000px;
}

.container {
  display: grid;
  height: 100vh;
  background:lightgray;
 
  grid-template-columns: repeat(12, 1fr);
  column-gap: 12px;
 
  align-items: center;
}

次にGridを用いてSub panelとMain panelを12カラムに対して2:3となるように設定する。いろいろな設定方法があるがitem-1に対してgrid-column: 2 / span 4;とすると12カラムの2カラム目から4カラム分の長さの領域を確保する。6カラム目までitem-1の領域になるので、item-2はgrid-column: 6 / span 6;として、6カラム目から6カラム分の長さの領域を確保する。確保した領域がわかるように緑の点線枠をborder: 2px dashed green;として設定した。

.item-1 {
  border: 2px dashed green;
  grid-column: 2 / span 4;
  height: 50vh;
}
.item-2 {
  border: 2px dashed green;
  grid-column: 6 / span 6;
  height: 50vh;
}