> ## Documentation Index
> Fetch the complete documentation index at: https://docs.luminus.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# モダンCSSレイアウト

> Flexbox、Grid、コンテナクエリなどのモダンなレイアウト技術の解説

## Flexbox

一次元のレイアウトに最適なFlexboxの使用方法を解説します。

```css theme={null}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1;
  min-width: 0; /* オーバーフロー防止 */
}

/* フレックスアイテムの順序変更 */
.item:first-child {
  order: 2;
}
```

### Flexboxのベストプラクティス

```css theme={null}
/* 折り返し可能なグリッドレイアウト */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid-item {
  flex: 1 1 300px; /* 成長、縮小、基本サイズ */
}
```

## CSS Grid

二次元のレイアウトに最適なGrid Layoutの使用方法を解説します。

```css theme={null}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* 領域の名前付け */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```

### サブグリッド

```css theme={null}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}
```

## コンテナクエリ

要素のコンテナサイズに基づいてスタイルを変更します。

```css theme={null}
.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}
```

## アスペクト比の制御

```css theme={null}
.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* カード要素のアスペクト比 */
.card {
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
```

## レスポンシブレイアウト

### メディアクエリとビューポート

```css theme={null}
/* モバイルファースト */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ビューポートユニット */
.hero {
  height: 100vh;
  padding: clamp(1rem, 5vw, 3rem);
}
```

## モダンなセンタリング技術

```css theme={null}
/* Flexboxを使用したセンタリング */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gridを使用したセンタリング */
.center-grid {
  display: grid;
  place-items: center;
}

/* 絶対配置を使用したセンタリング */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

## マルチカラムレイアウト

```css theme={null}
.content {
  columns: 3 300px;
  gap: 2rem;
}

/* カラム内での改ページ防止 */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
}
```

## スティッキーポジショニング

```css theme={null}
.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

/* スティッキーサイドバー */
.sidebar {
  position: sticky;
  top: 2rem;
  height: calc(100vh - 4rem);
  overflow-y: auto;
}
```

## 最新のレイアウトテクニック

### グリッドマスク

```css theme={null}
.masked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  mask-image: linear-gradient(to bottom, 
    black calc(100% - 100px),
    transparent);
}
```

### スクロールスナップ

```css theme={null}
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.scroll-item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}
```

<Note>
  これらのモダンなレイアウト技術は、ブラウザのサポート状況が異なる場合があります。
  必要に応じてフォールバックを実装することを検討してください。
</Note>

<Tip>
  複雑なレイアウトを実装する際は、まずシンプルなベースレイアウトを作成し、
  段階的に機能を追加していくアプローチを推奨します。
</Tip>