Grid

Grid Layoutに使用するCSS

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

  • DEMO
  • grid 1
  • grid 2
  • grid 3
  • grid 4

使い方

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

  • CSS
.grid {display: grid;}
.grid.col1 {grid-template-columns: repeat(1, 1fr);}
.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_col1 {grid-template-columns: repeat(1, 1fr);}
  .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;}
}

Class Copy