[포스코x코딩온] 웹개발자 풀스택 과정 3주차 | CSS 그리드(Grid)

그리드(Grid)

• 페이지의 레이아웃을 만들 때 사용
• IE 지원 안됨(IE11은 부분 지원)
• Flex가 한 방향에 대해서 정렬을 했다면 Grid는 여러 방향에 대해서도 정렬을 한다.
• CSS3 부터 등장
  

display: grid;

• Flex와 마찬가지로 container속성과 item속성이 각각 존재한다.
• display: grid >> container에 해당하는 요소에 속성을 적용시켜주면 된다.

Container 속성의 종류

속성	뜻
grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-column	명시적 열(Track)의 크기를 정의
grid-template-areas	영역(Area) 이름을 참조해 템플릿 생성
grid-template	grod-template-xxx의 단축속성
row-gap(grid-row-gap	행과 행 사이의 간격(Line)을 정의
column-gap(grip-column-gap)	열과 열 사이의 간격(Line)을 정의
gap(grid-gap)	xxx-gap의 단축속성
grid-auto-rows	암시적 행(Track)의 크기를 정의
grid-auto-columns	암시적 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

//style
     .container{
        display:grid;
     }  
     .box{
        width: 100px;
        height: 100px;
     } 
     .red{
        background-color: red;
     }
     .orange{
        background-color: orange;
     }
     .yellow{
        background-color: yellow;
     }
     .green{
        background-color: green;
     }
     .blue{
        background-color: blue;
     }
     .indigo{
        background-color: indigo;
     }
     .purple{
        background-color: purple;
     }
// body
     <div class="container">
        <div class="red box"></div>
        <div class="orange box"></div>
        <div class="yellow box"></div>
        <div class="green box"></div>
        <div class="blue box"></div>
        <div class="indigo box"></div>
        <div class="purple box"></div>
	</div>

grid-template-columns/rows

• 각각 아이템 행과 열의 크기를 설정
  • 하나의 단위가 아닌 여러 단위를 섞어서 사용 가능
  • 새로운 단위 fr(fraction, 공간 비율)
• repeat() 함수와 같이 사용가능

repeat(횟수, 크기)

• grid-template-rows: repeat(5, 100px)
  : grid-template-rows 100px을 5번 반복하겠습니다.
  = grid-template-rows: 100px 100px 100px 100px 100px 와 같다.

minmax(최소 크기, 최대 크기)

• 브라우저 크기가 변하면 최소 크기와 최대 크기를 확보할 수 있도록 하는 함수
• 크기에는 px, % 등 다양한 단위를 쓸 수 있다.
• 크기 대신 auto라는 키워드를 사용가능
• minmax(100px, auto) : 브라우저 크기가 줄어들어도 100px는 확보하고 최대 크기는 알아서 늘어나도록 한다.

row-gap/column-gap/gap

• row-gap : 행간 간격
• column-gap : 열간 간격
• gap : 행과 열 간격 모두 설정 가능

align-content

• items의 세로 정렬
• 속성값
  • stretch : default값
  • center
  • end
  • start
  • space-between
  • space-around
  • space-evenly

start	end	space-between	space-around	code

justify-content

• items의 가로 정렬
• 속성값
  • stretch : default값
  • center
  • end
  • start
  • space-between
  • space-around
  • space-evenly

code	center	end	space-around	space-between

place-content

• align-content와 justify-content의 단축속성
• align-content와 justify-content의 단축속성
• 만약 같은 속성값을 적용하고 싶다면 하나의 속성만 쓰면 두 속성에 모두 적용된다.(align -> justify 순서)

item 속성

grid-row-start / grid-row-end

• 단축 속성 grid-row : 시작 / 끝;
• 시작점과 끝점은 그리드 라인을 의미, 시작라인부터 끝 라인까지 크기 할당됨

grid-column-start / grid-column-end

• 단축 속성 grid-column : 시작 / 끝;

• 사용 방법은 grid-row와 동일

  

자리 없는애들은 자연스럽게 밀림

align-self, justify-self

• item 한 개에 대한 정렬 속성
• 아이템의 전체 크기(그리드 셀)을 기준으로 아이템을 각각 세로, 가로 축에 대해 정렬

place-self

• align-self와 justify-self의 단축속성

order

• order : 0(default)
  • 처음에는 모두 order 0의 값을 가지고 있기 때문에 특정 item에 0 이외의 다른 값을 주면 재배치 된다.
• 작은 수 일수록 먼저 배치
• 음수도 가능
• 시각적인 순서는 변경되지만 실제 HTML 구조를 바꾸는 것은 아님(웹 접근성 측면에서 생각해봐야 할 문제)

z-index

• 요소가 겹쳤을 때 앞으로 나오도록 설정
• 일반적으로 쓰이는 position의 z-index 속성과 같음
• 일반적으로 static 요소에는 z-iondex를 적용시킬 수 없지만, grid item에서는 position 속성이 없어도 z-index가 적용됨

컨테이너 속성 grid-template-areas, grid-areas

• 영역 이름을 설정할 수 있음

//body
<div class="container">
  <div class="header"></div>
<div class="main"></div>
<div class="aside"></div>
<div class="footer"></div>
</div>

//css
<style>
  .container {
    display: grid;
    width: 500px;
    height: 500px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
    "header header header header"
    "main main aside aside"
    "main main aside aside"
    "footer footer footer footer";
  }
.header {
  background-color: red;
  grid-area: header;
}
.main {
  background-color: blue;
  grid-area: main;
}
.aside {
  background-color: aqua;
  grid-area: aside;
}
.footer {
  background-color: yellowgreen;
  grid-area: footer;
}
</style>

item 속성의 종류

속성	뜻
grid-row-start	그리드 아이템(item)행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/ 끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx 의 단축 속성(열 시작 / 끝 위치)
grid-area	영역(Area)이름을 설정하거나, grid-row와 grid-column의 단축속성 지정
align-self	단일 그리드 아이템을 수직(열 축) 정렬
justify-self	단일 그리드 아이템을 수평(행 축) 정렬
place-self	align-self와 justify-self의 단축속성
order	그리드 아이템의 배치 순서를 지정
z-index	그리드 아이템의 쌓이는 순서를 지정