CSS 그리드 - 명시적 vs 암시적 그리드

Grid는 웹용 2차원 레이아웃 시스템입니다. 명시적 크기 조정이 제공하는 컨트롤과 암시적 크기 조정의 유연성을 결합하여 강력하고 레이아웃에 대한 반응성이 뛰어납니다. 그리드에는 일반적으로 열, 행 및 간격(일반적으로 여백이라고 함)이 있습니다.

그리드로 무엇을 할 수 있나요?

행 및 열 트랙의 크기를 조정하거나 콘텐츠 크기에 반응하도록 하는 방법을 선택할 수 있습니다.

그리드 컨테이너의 직계 하위 항목이 이 그리드에 자동으로 배치되거나 항목을 원하는 정확한 위치에 배치합니다.

쉽게 배치할 수 있도록 그리드의 선과 영역에 이름을 지정할 수 있습니다.

그리드 컨테이너의 여유 공간을 트랙 간에 분배할 수 있습니다.

그리드 항목을 해당 영역 내에서 정렬할 수 있습니다.

CSS 그리드 만들기

display: grid CSS 속성을 HTML 요소에 적용하면 직접 자식(그리드 항목이라고 함)에 대한 새 그리드 서식 컨텍스트가 생성됩니다. CSS 속성grid-template-columns 및 grid-template-rows을 사용하여 그리드 열 및 행의 선 이름 및 트랙 크기 조정 기능을 정의할 수 있습니다. 다음 예제.grid>div{Item $}*6를 검토하고 CodePenpen.new을 사용하여 따라해 보겠습니다.

.grid {
  display: grid;
  /* Create column templates */
  /* Where the 1st item has 100px */
  /* and the 2nd item takes the remaining */
  grid-template-columns: 100px auto;
  /* Define column and row gutters */
  gap: 1rem;
}

.grid > div {
  border: 3px dotted black;
}

명시적 대 암시적

grid-template-columns 를 사용하여 열의 크기를 명시적으로 정의하는 방법에 주목하십시오. CSS 속성grid-template-columns: 100px auto;을 적용하여 그리드의 첫 번째 및 두 번째 열을 명시적으로 정의한 다음 나머지 모든 열을 명시적으로 동일하게 정의합니다.

따라서 행에 grid-template-rows를 사용하지 않는 경우 Grid는 행을 어떻게 정의합니까? 이것이 바로 명시적 그리드와 암시적 그리드가 작동하는 방식입니다. 기본적으로 Grid는 암시적으로 행 트랙(또는 정의되지 않은 트랙)을 생성하고 달리 정의되지 않는 한 크기를 조정합니다auto. 암시적 그리드 트랙의 크기를 정의하기 위해 CSS 속성 grid-auto-columns 및 grid-auto-rows 을 사용할 수 있습니다. CSS에서 다음과 같이 변경해 보세요.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Create row templates */
  /* Where the 1st row is explicitly */
  /* the rest will be defined implicitly by Grid */
  grid-template-rows: auto;
  /* Define a size for the implicitly defined tracks */
  /* Where they are all set to 100px instead of auto */
  grid-auto-rows: minmax(100px, auto);
  gap: 1rem;
}

.grid > div {
  border: 3px dotted black;
}

디자인 요구 사항에 따라 그리드에서 명시적 또는 암시적으로 정의하는 것이 합리적인지 결정합니다. repeat() 또는 minmax()가 어떻게 작동하고 CSS Functions이 무엇인지 질문하기 전에 지금까지 다룬 내용을 사용하여 실제 예제를 만들어 보겠습니다. 간단한 프로필 카드를 만들어 봅시다.

<div class="grid">
  <div>avatar</div>
  <img src="https://avatars.githubusercontent.com/ekqt" alt="Hector Sosa" />
  <div>name</div>
  <div>Hector Sosa</div>
  <div>bio</div>
  <div>From 🇭🇳</div>
  <div>location</div>
  <div>Prague, Czech Republic</div>
</div>
<style>
  .grid {
    width: min(100% - 1rem, 30rem);
    margin: 4rem auto;
    font-family: monospace;
    /* Grid Styling */
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: minmax(50px, auto);
    gap: 1rem;
  }

  .grid>div {
    border: 1px solid lightgray;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .grid>div:nth-child(odd) {
    text-align: right;
  }

  .grid>img {
    max-height: 100px;
    border-radius: 100%;
  }
</style>

pen.new 로 이동하여 빠른 CodePen을 만들고 스니펫을 붙여넣은 다음 그리드 관련 CSS 속성을 변경하여 실험해 보십시오. 이것은 단지 예일 뿐입니다. <div/> 를 많이 사용한다는 점에 유의하십시오. IRL은 Semantic HTML 작성에 최선을 다해야 합니다.

최초 게시: CSS Grid - Explicit vs Implicit Grid