Grid

Grid Layoutに使用するCSS

詳しい導入事例は導入方法を参照してください。

DEMO

grid 1
grid 2
grid 3
grid 4
grid 5

Class Copy

使い方

カラム数は[.col*]で指定する。
※採用したばかりなので細かい指定はまだ用意していません。

.grid {display: grid;}
  .grid.col2 {grid-template-columns: repeat(2, 1fr);}
  .grid.col3 {grid-template-columns: repeat(3, 1fr);}
  .grid.col4 {grid-template-columns: repeat(4, 1fr);}
  .grid.row2 {grid-template-rows: repeat(2, 1fr);}
  .grid.row3 {grid-template-rows: repeat(3, 1fr);}
  .grid.row4 {grid-template-rows: repeat(4, 1fr);}
  
  .grid.as {align-content: start;}
  .grid.ae {align-content: end;}
  .grid.gafc {grid-auto-flow: column;}
  .grid.gafr {grid-auto-flow: row;}
  
  @media screen and (max-width: 768px) {
    .grid.XS_col2 {grid-template-columns: repeat(2, 1fr);}
    .grid.XS_col3 {grid-template-columns: repeat(3, 1fr);}
    .grid.XS_col4 {grid-template-columns: repeat(4, 1fr);}
    .grid.XS_row2 {grid-template-rows: repeat(2, 1fr);}
    .grid.XS_row3 {grid-template-rows: repeat(3, 1fr);}
    .grid.XS_row4 {grid-template-rows: repeat(4, 1fr);}
    .grid.XS_gafc {grid-auto-flow: column;}
    .grid.XS_gafr {grid-auto-flow: row;}
  }
  
  .gp4 {gap: 4px;}
  .gp8 {gap: 8px;}
  .gp16 {gap: 16px;}
  .gp24 {gap: 24px;}
  .gp32 {gap: 32px;}
  
  @media screen and (max-width: 768px) {
    .XS_gp4 {gap: 4px;}
    .XS_gp8 {gap: 8px;}
    .XS_gp16 {gap: 16px;}
    .XS_gp24 {gap: 24px;}
    .XS_gp32 {gap: 32px;}
  }