SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

【React × Emotion】GridLayoutの使い方

作成日：2022月04月10日
更新日：2024年01月09日

cssのgridを使う時に基本となるプロパティをメモ。 react + emotionでサンプル実装していく

App.js
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";


export default function App() {
  const array = Array.of(1, 2, 3, 4, 5, 6, 7);


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div css={[grid]}>
        {array.map((val) => (
          <div css={[gridItem]}>{val}</div>
        ))}
      </div>
    </div>
  );
}


const grid = () => [
  css`
    display: grid;
    // ここにプロパティを追加実装していく
  `
];


const gridItem = () => [
  css`
    border:1px solid black;
    text-align:center;
  `
];

display: grid

displayプロパティの一つで 設定した要素の子要素を
gridで表示する。
display:gridを設定するだけでは何も変化はないので
下記のプロパティで「何列」にするなどを合わせて設定する必要がある

grid-template-columns

gridの列を何列で、どれくらいの幅にするかを設定するプロパティ
カラムの数だけ値を設定する。

grid-template-columnsのサンプル

列幅をpxで設定するパターン

1行に3列で、1列目が20px,2列名が200pxの例

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: 20px 200px 200px;
  `
];

列幅をfr(fraction)で設定するパターン

frは比のこと。列幅を全て同じにしたい場合は1fr:1fr:1frで設定する。

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  `
];

repeat関数

grid-template-columnsの設定時に使用できる関数で
列数と幅を同時に設定できる。 repeat関数はgrid-template-columnsで設定し、
引数は

  • 列数
  • 幅

を指定する。

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( 4 , 1fr);
    gap:1px 20px;
  `
];

auto-fill

列数を定数ではなく自動で折り返したい場合は、repeat関数の第一引数に auto-fillを設定する。

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(300px,1fr) ) ;; 
    gap:1px 20px;
  `
];

auto-fillを設定した場合、グリッドアイテムが１つ以上入るスペースができたら、新しく空のアイテムで埋める
ようになるため、上記の例でいうと、

  • 一行内で300pxを超える余白ができたら要素で埋める。
  • 一行内で余白が300pxを下回れば折り返す

ということになる
そのため、最大幅を1frに設定しているが、実際は余白が300pxを上回った場合は　　 折り返していた要素が上に戻ってくるため引き伸ばしはされない。

auto-fit

列折り返したい場合は、repeat関数の第一引数に auto-fitを設定しても実現することができる。
auto-fillとの違いとしては余白ができても新しい要素で埋めることはせず、
minmaxで指定している最大幅まで伸びるようになる

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px,1fr) ) ;; 
    gap:1px 20px;
  `
];

auto-fitの場合は最小幅が100pxを下回る場合のみ折り返すようになる。
100pxを超える余白ができた場合は、折り返さずにその分を要素に
割り振るので要素が引き伸ばされる
※前提として最大幅に1frが設定されていること。

minmax関数

最大幅と最小幅を設定することができる。
repeat関数はgrid-template-columnsで設定し、
引数は

  • 最小幅
  • 最大幅

を指定する。

grid全体の最小幅、最大幅を設定する

grid-template-columnsにminmax関数を設定することで
grid全体の最小最大幅を設定できる

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns:minmax(800px,1fr); 
    gap:1px 20px;
  `
];

grid全体の幅が800px以上の場合は各要素が均等に大きくなり、
grid全体の幅が800pxを下回る場合は画面が切れる

grid要素の最小幅、最大幅を設定する

repeat関数の第二引数にminmax関数を渡すことで
grid要素の最小最大幅を設定することができる

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( 3, minmax(500px,1fr) ); 
    gap:1px 20px;
  `
];

grid要素の幅が500px以上の場合は各要素が均等に大きくなり、
grid要素の幅が500pxを下回る場合は画面が切れる

gap

grid要素の間を設定することができる

column-gap

gird要素間の横の間隔を設定

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap:5px;
  `
];

row-gap

gird要素間の縦の間隔を設定

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap:10px;
  `
];

gap

gird要素間の縦横の間隔を一括で設定
一つ目の方が縦の間隔、二つ目が横の間隔になる
※一つしか書かなかった場合は同じ値が両方に適用される

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:1px 20px;
  `
];

justify-content

flexBoxのプロパティと同様に横方向の配置の調整ができる

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( 3, 100px ) ;
    gap:1px 20px;
    justify-content:center;
  `
];

align-items

flexBoxのプロパティと同様に縦方向の配置の調整ができる。
※align-itemsを設定する場合は高さの設定も同時にする必要がある

App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( 3, 100px ) ;; 
    gap:1px 20px;
    justify-content:center;
    align-items:center;
    height:50vh;
  `
];

grid-row-start(end)、grid-column-start(end)

gridの要素を結合することができる

  • rowは結合する行指定する
  • columnは結合する列を指定する
App.js
const grid = () => [
  css`
    display: grid;
    grid-template-columns: repeat( 3, minmax(100px,200px) ) ;


  `
];


const gridItem = (i) => {
  if(i === 0){
    return [
     css`
       border:1px solid black;
       text-align:center;
       grid-row-start:2;
       grid-row-end:4;
       grid-column-start:1;
       grid-column-end:3;
     `
     ];
    }else{
      return [
       css`
         border:1px solid black;
         text-align:center;
       `
       ];
  }
}

一括指定ver

grid-row,grid-columnで一括指定することも可能

App.js
const gridItem = (i) => {
  if(i === 0){
    return [
     css`
       border:1px solid black;
       text-align:center;
       grid-row:2/4;
       grid-column:1/3;
     `
     ];
    }else{
      return [
       css`
         border:1px solid black;
         text-align:center;
       `
       ];
  }
}

参考

gridの基礎
グリッドアイテムの自動折り返し（auto-fill,auto-fit）
CSS Gridで要素を中央に表示する方法

サクッとグリッドCSSを理解して、クライアントワークに使う
【CSS】grid-auto-rows -columnsの使い方、暗黙のトラックのサイズを指定!

【CSS Grid Layout】列数とアイテムの大きさを指定する「grid-template-columns」の使い方

新着記事

タグ別一覧
top