2025年4月23日 / 最終更新日時 : 2025年4月23日 はま爺 CSS

display: grid;

基本

ボタン

Table

基本

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

1
2
3
4
5
6
7

auto-fill

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

1
2
3
4
5
6
7

auto-fit

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

1
2
3
4
5
6
7
<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;
  }
}

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;
    }
  }
カテゴリー
CSS
タグ
HTML

前の記事

include
2025年4月20日