Grid 그리드 적용하는 방법 - display

그리드(Grid)는 컨테이너와 아이템으로 구성됩니다. 컨테이너에 display: grid를 코드를 추가해도 아무런 변화가 없고 행과 열에 대한 정의가 들어가야 그리드가 적용됩니다.

display: grid

그리드(Grid)는 컨테이너(Container)와 아이템(Item)으로 구성됩니다.

아래는 그리드를 위한 간단한 예제입니다.

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>
.item {
  padding: 20px;
  border: 1px solid #444444;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

컨테이너에 display: grid를 추가하면 그리드가 적용됩니다. 하지만 플렉스(flex)와는 달리 아래와 같이 코드를 추가해도 아무런 변화가 없습니다.

.item {
  padding: 20px;
  border: 1px solid #444444;
}
.container {
  display: grid;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

행과 열에 대한 정의가 들어가야 그리드가 적용됨을 알 수 있습니다.

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

display: inline-grid

inline-grid 속성을 사용하면 내용에 따라 차지하는 공간이 달라집니다.

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

 

기타 CSS 참조

Post a Comment