2025年6月13日 / 最終更新日時 : 2025年12月27日 Eiji CSS

display: grid;

基本

grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));//　グリッド最小値 : 290px 、あとは成り行き
グリッド最大値 : 500pxを追加する場合はminmax(290px, 500px)、並べる場合は minmax(290px, 500px)　1fr 1fr;

auto-fill

親要素にスペースが余る場合、空のグリッドを作成、空グリッドが増えていく

auto-fit

親要素にスペースが余る場合、グリッドが伸びる（fitする）

<div class="sam51 hd_wrap">
  <div class="box b1">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>
<div class="sam51 autofill hd_wrap">
  <div class="box">1</div>
  ・・・
</div>
<div class="sam51 autofit hd_wrap">
  <div class="box">1</div>
  ・・・
</div>

.sam51 {
  width: 100%;
  display: grid;
  gap: 2vw;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));

  &.autofill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  &.autofit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
  &.b1 {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

auto-flow

.auto-flow {
  display: grid;
  grid: 2rem 2rem / auto-flow 2rem 4rem;
}

grid-template-columns: max-content auto;

親譲りの無鉄砲で

親譲りの無鉄砲で小供の時から

親譲りの

.max-content {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 2em;
}

grid-template-columns: max-content auto;

親譲りの無鉄砲で

親譲りの無鉄砲で小供の時から

親譲りの

.max-content {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 2em;
}

注釈

※

親譲りの無鉄砲で小供の時から損ばかりしている。

・

親譲りの無鉄砲で小供の時

.caution_11 {
  display: grid;
  grid: auto / 1em auto;
  gap: 0.3em;
}

設定：セレクター

Grid、Flexboxで長い英数字（URLやファイル名）でレイアウトが崩れる場合は、Gridの子要素に「min-width: 0」（または minmax(0, 1fr)）が必要

spanを使用

カードレイアウトで便利。flexでも同じことをできるけど記述が多くなる

坊ちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

ポラーノの
広場

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<div class="hd_wrap">
  <div class="sam52">
    <div class="items">
      <div class="img"></div>
      <div class="stt">坊ちゃん</div>
      <div class="copy">親譲りの無鉄砲で...</div>
      <a></a>
    </div>
    <div class="items">
      <div class="img"></div>
      <div class="stt">徒然草</div>
      <div class="copy">つれづれなるまゝに、...</div>
      <a></a>
    </div>
    <div class="items">
      <div class="img"></div>
      <div class="stt">ポラーノの広場</div>
      <div class="copy">あのイーハトーヴォの...</div>
      <a></a>
    </div>
  </div>
</div>

.sam52 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 1rem;

  & .items {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    position: relative;
    & .img {
      overflow: hidden;
      width: 100%;
      height: 5lh;
      background: #999;
      color: #fff;
    }
    & .stt {
      font-size: 1.3em;
      font-weight: 700;
      order: -1;
      padding: 1rem;
    }
    & .copy {
      margin: 1rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
    & a {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
  }
}

ボタン

右下に共通で置く場合

align-self: end; / justify-self: end; で指定エリアを右下に

親譲りの無鉄砲で小供の時から損ばかりしている。

リンクA

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、

リンクB

あのイーハトーヴォのすきとおった風

リンクC

<div class="sam54">
  <div class="Cards">
    <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p>
    <span>リンクA</span>
  </div>
  <div class="Cards">
    <p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、</p>
    <span>リンクB</span>
  </div>
  <div class="Cards">
    <p>あのイーハトーヴォのすきとおった風</p>
    <span>リンクC</span>
  </div>
</div>

.sam54 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  & .Cards {
    display: grid;
    background: rgb(206, 206, 206);
    padding: 1em;

    & > span {
      align-self: end;
      justify-self: end;
    }
  }
}

矢印を設置

バランスを取るのが楽に

短い場合は真ん中長い場合は右＞アイコンを避けて配置されるもっとコピーが長い場合もアイコンの大きさを避けて配置される。多行でもOK

<div class="sam55">
  <a class="Link">短い場合は真ん中</a>
  <a class="Link">長い場合は右＞アイコンを避けて配置される</a>
  <a class="Link">もっとコピーが長い場合もアイコンの大きさを避けて配置される</a>
</div>

.Link {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 1rem;
    align-items: center;
    border-radius: min(100px, 200%);
    padding: 1rem 2rem;
    &::before {
      content: "";
    }
    &::after {
      justify-self: end;
      content: ">";
    }
  }

gridでボタンはこちらから

Table

sp切り替えで向きを変更

TypeA

A-2

A-3

A-4

TypeB

B-2

B-3

B-4

TypeC

C-2

C-3

C-4

<div class="tables t1">
  <div>TypeA</div>
  <div>A-2</div>
  <div>A-3</div>
  <div>A-4</div>
  <div>TypeB</div>
  <div>B-2</div>
  <div>B-3</div>
  <div>B-4</div>
  <div>TypeC</div>
  <div>C-2</div>
  <div>C-3</div>
  <div>C-4</div>
</div>

.tables {
  & > div {
    outline: 1px solid #ccc;
    outline-offset: -0.5px;
    padding: 1em;
    display: grid;
    justify-content: center;
  }
  &.t1 > div:nth-child(4n + 1) {
    background: #f1f1f1;
  }
  @media print, screen and (min-width: 736.1px) {
    &.t1 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media screen and (max-width: 736px) {
    &.t1 {
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: repeat(4, auto);
    }
  }
}

sp切り替えで横スクロール

overflow wrapで包むと外側のoutline-offset: -0.5px; がうまく表示されない場合あり : 要確認

TypeA

A-2

A-3

A-4

TypeB

B-2

B-3

B-4

TypeC

C-2

C-3

C-4

<div class="t2_w">
  <div class="tables t2">
    <div>TypeA</div>
    <div>A-2</div>
    <div>A-3</div>
    <div>A-4</div>
    <div>TypeB</div>
    <div>B-2</div>
    <div>B-3</div>
    <div>B-4</div>
    <div>TypeC</div>
    <div>C-2</div>
    <div>C-3</div>
    <div>C-4</div>
  </div>
</div>

.t2_w {
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0 0 1em;
  scroll-behavior: smooth;
}
@media screen and (max-width: 736px) {
    &.t2 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      & div {
        width: calc(100vw / 4);
      }
    }

    &.t2 > div:nth-child(4n + 1) {
      left: 0;
      position: sticky;
      z-index: 2;
    }
}

colspan rowspanの設定

TypeA

A-2

A-3(2マス)

TypeB

B-2

B-3

B-4

TypeC

C-2(3マス)

<div class="tables t3">
  <div class="th">TypeA</div>
  <div>A-2</div>
  <div class="a3">A-3(2マス)</div>
  <div class="th">TypeB</div>
  <div>B-2</div>
  <div>B-3</div>
  <div>B-4</div>
  <div class="th">TypeC</div>
  <div class="c2">C-2(3マス)</div>
</div>

 &.t3 {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    & .th {
      background: #f1f1f1;
    }

    & .a3 {
      grid-area: 3 / 1 / 5 / 2;
    }
    & .c2 {
      grid-area: 2 / 3 / 5 / 4;
    }
  }

線が重なって太く見える対応をこちらを参照

テーブルレイアウト

Layout

grid-auto-flow
グリッドアイテムがどのように配置されるかを指定

row : 横方向
column : 縦方向
dense : 横方向隙間を埋めながら配置 -順番が入れ替わる場合あり-
column dense : 縦方向隙間を埋めながら配置 -順番が入れ替わる場合あり-

direction
文章の方向を指定 grid以外でも使用可

ltr : 左から右へ left to right
rtl : 右から左へ right to left

縦書き : grid-auto-flow:column 右から : direction:rtl

$(function () {
  $(".b1").on("click", function () {
    $(".sam59").toggleClass("g1");
    if ($(".message .m1").text() === "grid-auto-flow:column") {
      $(".message .m1").text("grid-auto-flow:row");
    } else {
      $(".message .m1").text("grid-auto-flow:column");
    }
  });
  $(".b2").on("click", function () {
    $(".sam59").toggleClass("g2");
    if ($(".message .m2").text() === "direction:rtl") {
      $(".message .m2").text("direction:ltr");
    } else {
      $(".message .m2").text("direction:rtl");
    }
  });
});

.sam59 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: repeat(4, auto);

  &.g1 {
    grid-auto-flow: column;
  }
  &.g2 {
    direction: rtl;
  }

  & div {
    display: grid;
    place-items: center;
    outline: 1px solid #ccc;
    padding: 1em;
  }
}

グリッドレイアウト
input type=”file”で要素が増えてもレイアウトを保持する

<div class="ph_sample">
  <img src="" alt="" />
  <input type="file" />
  <p>「j6sW3Rse9BCCfFgY9JAaSeTd3BJECE5NDZQpFMeDaD6xNPCF2dQZ5jfuMzzafSsmT3kbyVeSHDa5mbdmRQ5KQBNEGVKxd6bFcQ M5ctzniinJBW3rS6kNpkhmWPEYUwhrm7yxjxczCE5KyjPfSz7wUgMNAfhJEgzRnKXV92BYFj8fdaEXLpxsTtmHZf」がアップロードされています。</p>
  <input type="submit" value="削除" />
</div>

「j6sW3Rse9BCCfFgY9JAaSeTd3BJECE5NDZQpFMeDaD6xNPCF2dQZ5jfuMzzafSsmT3kbyVeSHDa5mbdmRQ5KQBNEGVKxd6bFcQ M5ctzniinJBW3rS6kNpkhmWPEYUwhrm7yxjxczCE5KyjPfSz7wUgMNAfhJEgzRnKXV92BYFj8fdaEXLpxsTtmHZf」がアップロードされています。

.ph_sample {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 1em 2em;
        justify-content: center;
        width: 100%;
        max-width: 100%;

        @media (48em >= width) {
          grid-template-columns: 1fr;
          column-gap: 0;
          & > * {
            justify-self: left;
          }
        }
        & p {
          min-width: 0;
          overflow-wrap: break-word;
          word-break: break-all;
          grid-column: 2;
          @media (48em >= width) {
            grid-column: 1;
          }
        }

        & > img {
          grid-column: 1;
          aspect-ratio: 4 / 3;
          outline: 2px solid blue;
          grid-row: 1 / span 4;
          align-self: start;
          @media (48em >= width) {
            width: min(50vw, 200px);
            margin-inline: auto;
          }
        }
      }