[Web] CSS 그리드 레이아웃 몇가지 예시

그리드 레이아웃은 모눈종이에 색칠하는 식으로 화면을 구성할 수 있는 방법이라고 생각하면 된다.

이런 블로그 같은 레이아웃을 구성하려고 하면 기존에 쓰던 float같은 방법과는 전혀다르다.

훨씬 직관적이고 쉬운것 같다.

 

9개의 큐브 같은 사각형이 있다고 생각하고, 그곳을 원하는것으로 채운다고 생각하면 된다.

아래의 코드 같은 경우의 상단 4개의 블럭은 nav로, 나머지는 영역을 나눠서 쓰면 된다.

grid-template-areas에서 쉽고 보기쉽게 쓸 수 있다.

 

<div class="grid-container">
	<div class="grid-nav">1</div>
	<div class="grid-side">2</div>
	<div class="grid-content">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
  	"grid-nav  grid-nav     grid-nav     grid-nav"
  	"grid-side grid-content grid-content grid-content"
  	"grid-side grid-content grid-content grid-content";
}
.grid-container div {
  border: solid 1px black;
}

.grid-nav {
  grid-area: grid-nav;
}

.grid-side {
  grid-area: grid-side;
}

.grid-content {
  grid-area: grid-content;
}

@media screen and (max-width: 438px) {
  .grid-container {
    display: block;
  }
}

 

반응형으로 사이즈가 작아지면, @media query를 이용하여 한줄씩 보이도록 설정해놨다.

display: block말고도 아래코드 같이 설정할 수도 있다.

@media screen and (max-width: 438px) {
  .grid-container {
  	grid-template-areas:
  	"grid-nav     grid-nav     grid-nav     grid-nav"
  	"grid-side    grid-side    grid-side    grid-side"
  	"grid-content grid-content grid-content grid-content";
  }
}

 

---

 

다음으로는 이런 형태의 레이아웃을 구성해야한다고 하자.

float로 어찌어찌 끼워맞추면서 할 수 있을 것 같긴한데 grid쓰면 더 쉬울 것 같다.

 

 

<div class="grid-container">
	<div class="grid-nav"><img src="https://placeimg.com/500/500/any"></div>
	<div><img src="https://placeimg.com/500/500/arch"></div>
	<div><img src="https://placeimg.com/500/500/nature"></div>
	<div><img src="https://placeimg.com/500/500/people"></div>
	<div><img src="https://placeimg.com/500/500/tech"></div>
	<div><img src="https://placeimg.com/600/600/people"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "grid-nav grid-nav ." "grid-nav grid-nav ." ". . .";
}
.grid-container img {
  border: solid 1px black;
  width: 100%;
  height: 100%;
}

.grid-nav {
  grid-area: grid-nav;
}

@media screen and (max-width: 768px) {
  .grid-container {
    display: block;
  }
}