CSS Grid 정복하기 - Container편

옛슬·2021년 10월 12일
CSScss gridgrid그리드그리드시스템웹퍼블리셔
1

Cooking CSS 🍳👩‍🍳🤍

목록 보기
1/5
post-thumbnail

추천드려요 🙆‍

◼ CSS Grid를 처음 사용해보는 분 (잇츠 미..😮)
◼ CSS에 애정이 많은 아무나 🥰

Overview

◼ 이제 배울 때가 되었다. H E L L O ! G R I D !
✳ IE11 지원종료 ✳
◼ 사실 어려워서 배우길 꺼려하다가 이번에 제대로 배워보기로 했다!
◼ 글을 작성하며 한번 더 복습을 하고 깔끔하게 정리 🗽
◼ 목표는 끝나고 작은 미니 프로젝트 웹사이트를 만들어 보는 것😎✨

Grid를 간단하게 알아보자 💙

Grid


[출저 - Google]

◼ 사전적 정의 : 격자, 눈금
◼ 디자인 '그리드 시스템(Grid System)'의 정의 :
페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말한다. [출저 - 아임웹]

이제 CSS Grid를 경험해보자 ✨

◼ CSS Grid는 Flex처럼 Container와 items로 구성되어 있다.

<div class="grid-container">
	<header class="grid-item">Header</header>
	<section class="grid-item">Section</section>
	<aside class="grid-item">Aside</aside>
	<footer class="grid-item">Footer</footer>
</div>

◼ Grid 시작하기 👩‍💻

.grid-container {
	display: grid | inline-grid;
}
  • 컨테이너에게 display: grid 혹은 display: inline-grid를 준다.
  • 컨테이너는 grid (block의 특성) , inline-grid (inline의 특성)을 갖게 된다.
  • 이제 진짜 G.R.I.D 사용해보자 😋

우선 Container의 Property부터 정복해보자 👩‍🚀🌟

grid-template-rows | grid-template-columns

행과 열의 크기를 지정해준다. (갯수가 아닌 크기를 지정한다!!)

  • 해당 예시를 보면 rows는 2행까지 크기가 설정되어 있어서 마지막에 오는 footer의 경우 auto 크기를 갖게 되는 것을 볼 수 있다.
  • 또한 알 수 있는 것은, 어떤 property를 따로 설정하지 않았을 경우 처음 아이템이 흐르는 방향은 가로방향인 것을 알 수 있다.

repeat() / fr / minmax(최솟값,최댓값)

[grid-template]에 사용할 수 있는 단위이다.


1. repeat() : 반복횟수와 크기를 적어 여러개의 아이템에 크기를 지정.
2. fr: fraction의 약자로 비율을 나타내는 단위
3. minmax() : 최솟값과 최댓값을 설정할 수 있다.

grid-auto-rows | grid-auto-columns

크기가 지정되지 않은 행과 열의 크기를 지정할 수 있는 프로퍼티

🌟 즉, grid-template-rows와 grid-template-columns에서 지정하지 못한 크기를 지정할 수 있는 프로퍼티이다.

  • 아까봤던 예제를 다시 보면, grid-template-rows의 경우 2행까지만 크기가 지정되어있기 때문에 3행부터는 자동으로 auto로 적용된다.
  • 여기서 보면 알 수 있듯이 footer는 챙김을 받지 못하고 auto가 된 모습을 볼 수 있다. 😂

🌟 이때 footer를 챙겨주고 싶다면?? grid-auto-rows를 사용하자!

  • 우선 grid-auto-rows | grid-auto-columns의 경우 따로 행, 열의 갯수를 지정하지 않는다. 챙김받지 못하는 친구들까지 신경써줄 때 쓰는 프로퍼티이기 때문에!
  • 당연히 갯수가 들어가는 repeat()함수는 사용이 되지 않는다.

grid-gap

grid-row-gap과 grid-column-gap의 단축 프로퍼티

  • grid-row-gap과 grid-column-gap은 각 행과 열사이의 공간을 의미한다.
  • grid-gap을 통해 한번에 설정할 수 있다.
  • grid-gap: row-gap column-gap 순으로 기입한다.
  • 10px 30px 순으로 기입하였기 때문에 각 행마다 10px씩 공간을 주고, 각 열은 30px씩의 여백을 갖게 된다.

align & justify / place

수평, 수직 정렬과 관련된 프로퍼티로 flex와 유사하다.

  • align과 justify모두 뒤에 -content 혹은 -items를 붙여서 사용한다.
  • align은 수직방향, justify는 수평방향을 나타낸다.

◼ -content와 -item의 차이점은?

  • -content는 모든 item을 그룹지어 컨테이너 내에서의 위치를 나타낸다.
  • -item의 경우 각자의 item이 자신이 가지고 있는 공간 내에서의 위치를 나타낸다.

◼ justify-content | align-content

◼ justify-items | align-items

  • 배워보기 이전 기본값은 무엇을 가지고 있는 지 크롬 개발자도구에서 확인해보자!
  • justify-items는 normal이라는 값을 가지고 있다. 그래서 처음 grid를 설정 하고 [grid-template]을 설정하면 아이템은 해당 열 혹은 행의 크기를 꽉 채우게 된다.
  • 하지만, items로 위치를 선정하게 되면 해당 아이템은 기존의 크기로 변경되고 위치를 찾게 된다. normarl → 새로운 값을 만날 때
  • 예시:

◼ place-content | place-items

  • place의 경우 -content와 -items의 축약 프로퍼티이다.
.con {
	place-content: <align-content> <justify-content>;
    place-item: <align-items> <justify-items>
}

.con {
	place-content: start space-evely;
    place-item: center start;
}

간단한 정리

1. display: grid | inline-grid
➡ 그리드 레이아웃 설정
2. grid-template-rows | grid-template-columns
➡ 행과 열의 크기를 나타냄
➡ repeat(), fr, minmax()등의 함수 및 단위를 사용가능
3. grid-gap | grid-row-gap | grid-column-gap
➡ 행과 열 사이의 간격을 위한 프로퍼티
4. grid-auto-rows | grid-auto-columns
➡ 모든 행 혹은 열의 크기를 설정할 수 있는 프로퍼티
5. align & justify | place
➡ container 혹은 아이템의 위치를 위한 프로퍼티
--- 여기서부터는 아직 정리하지 못한 것
6. grid-auto-flow
➡ 그리드의 방향을 설정
7. grid-template-areas
➡ 그리드를 템플릿화하여 레이아웃을 만들 수 있음
➡ item에 grid-area를 설정하여 함께 사용

느낀점

처음 그리드를 배울 때는 이렇게 복잡하고 어려운걸 왜 굳이 사용하나 싶었는데 전체적인 틀이 잡히니 flex보다 정교하게 레이아웃을 잡을 때 사용한다는 이유를 알꺼 같다.
하지만 아직 item의 프로퍼티는 공부하지 못했다는 게 함정이다..😅

profile
옛슬
웹 퍼블리셔입니다💓
다음 포스트

CSS Grid 정복하기 - Item편

0개의 댓글