CSS의 그리드 및 Flex 레이아웃

소개

• FlexBox와 그리드 레이아웃은 모두 강력한 레이아웃입니다.

플렉스박스:

• Flexbox는 1차원 레이아웃 모델로 요소를 단일 행 또는 단일 열로 배열하는 데 가장 적합합니다.
• Flexbox는 요소의 크기나 컨테이너의 크기를 알 수 없는 경우에 특히 유용합니다.
• 가로와 세로로 항목을 정렬하는 데 유용하며 탐색 모음, 사이드바, 도구 모음을 만드는 데 매우 유용합니다.

CSS 그리드:

• 그리드는 2차원 레이아웃 모델로 요소를 행과 열로 동시에 배열하는 데 가장 적합합니다.
• 복잡한 레이아웃을 만드는 데 적합하고 열과 행을 동시에 처리할 수 있으므로 복잡한 페이지 레이아웃을 만드는 데 적합합니다.

그리드 레이아웃 자세히

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

행 재정의

• repeat(3, minmax(200px, 1fr)) 문은 각각 최소 크기가 200px이고 최대 크기가 1fr인 3개의 행(또는 사용 위치에 따라 열)을 생성합니다.
• 1fr 단위는 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다. 따라서 컨테이너 크기가 모든 행의 전체 최소 크기(이 경우 600px)를 초과하는 경우 나머지 공간은 행 간에 균등하게 분배됩니다.

repeat(3, minmax(200px 1fr))

자동 맞춤 및 자동 채우기

CSS 그리드의 자동 채우기 및 자동 맞춤 키워드는 그리드 항목이 그리드 컨테이너에서 추가 공간을 차지하지 않을 때 그리드가 작동하는 방식을 제어합니다.

자동 채우기

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

이 예에서 그리드는 컨테이너에 들어갈 수 있는 만큼의 100px 열을 생성합니다. 남은 공간이 있을 경우 열별로 균등하게 배분됩니다.

자동 맞춤:

• 이 키워드도 그리드에 가능한 한 많은 트랙을 생성하라고 지시하지만, 빈 트랙을 축소하므로 그리드 끝에 빈 트랙이 없습니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

이 예에서 그리드는 컨테이너에 들어갈 수 있는 만큼의 100px 열을 생성합니다. 여유 공간이 있는 경우 열에 균등하게 분배되며, 빈 열은 접혀집니다.

하위 그리드

• CSS 그리드 레이아웃의 하위 그리드 값은 그리드 항목을 그리드 컨테이너로 만들고 상위 그리드와 정렬하려는 경우에 사용됩니다.

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

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

참고:-

• 이 기능은 중첩된 그리드를 상위 그리드와 정렬하려는 경우 유용할 수 있습니다.
• 그러나 서브그리드는 모든 브라우저에서 널리 지원되지는 않습니다.

컨테이너 쿼리

1. 컨테이너 크기 문의

• 너비 미디어 쿼리는 뷰포트 너비를 고려합니다. 그러나 컨테이너 크기 쿼리는 컨테이너 너비를 고려합니다. 컨테이너는 쿼리되는 요소입니다.

규칙:-

• 컨테이너 자체가 아닌 컨테이너 하위 항목에만 적용되는 규칙

• 컨테이너 크기 쿼리는 미디어 쿼리를 대체하는 것이 아니라 반응형 디자인에 추가된 것입니다.
  

<article class="card">
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article >
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

위 내용은 CSS의 그리드 및 Flex 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!