0Pricing
CSS Academy · レッスン

Gridでのrepeat()とminmax()

repeat()とminmax()を使って複数のグリッドトラックを生成し、柔軟なサイズ範囲を定義します。

「Gridでのrepeat()とminmax()」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

Gridにおけるrepeat()

repeat(count, track-size)は、トラック定義を繰り返し記述せずに複数生成するCSS Grid関数です。grid-template-columnsとgrid-template-rowsの中で使用できます。

固定数でのrepeat()

均等な4列を作成します。

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

パターンでのrepeat()

トラックのパターンを繰り返します。

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

トラック内のminmax()

minmax(min, max)は、トラックサイズの範囲を定義します。

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

minmax()でのauto-fit

レスポンシブグリッドで使用する定番のレシピです。

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

トラックサイズには、固有サイズのキーワードを使用できます。

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

行でのminmax()

行にminmax()を使用すると、最小の高さを確保しながら、コンテンツに応じて高さを決められます。

  <div class="gallery"><div>1</div><div>2</div></div>

列でのfit-content()

fit-content(max)は、指定した最大値まではコンテンツに合わせてトラックの幅を広げます。max-contentに似ていますが、上限が設定されます。

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

repeat()と名前付きラインの組み合わせ

名前付きラインを繰り返すと、名前で個々の列を指定できます。

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

固定アイテムに使うauto-fillとminmax

アイテムを本来のサイズより大きく引き伸ばしたくない場合に使用します。

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
  </div>

Gridにおけるfrとパーセンテージの違い

パーセンテージとは異なり、fr単位はgapのスペースを自動的に考慮します。gap: 24pxを指定したrepeat(3, 1fr)では、3つの完全に均等な列が得られます。パーセンテージを使う場合は、gapを差し引くためにcalc()が必要です。

理解度チェック

repeat(3, minmax(100px, 1fr))は何を定義しますか。

まとめ

repeat(count, track)は、繰り返し記述せずに複数のトラックを生成します。minmax(min, max)は、柔軟なトラックサイズの範囲を定義します。repeat(auto-fit, minmax(280px, 1fr))パターンは、メディアクエリを必要とせず、列数を自動的に調整できる最も強力なレスポンシブグリッドです。コンテンツに応じたサイドバー列にはfit-content(max)を使用します。

よくある質問

「Gridでのrepeat()とminmax()」レッスンは無料ですか？

はい。「Gridでのrepeat()とminmax()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「Gridでのrepeat()とminmax()」で何を学びますか？

repeat()とminmax()を使って複数のグリッドトラックを生成し、柔軟なサイズ範囲を定義します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Gridでのrepeat()とminmax()」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 動的な計算のためのcalc()
  2. 流動的な値のためのmin()、max()、clamp()
  3. Gridでのrepeat()とminmax()
  4. color-mix()と相対カラー構文
← CSS Academyに戻る