css grid 정리

켄·2022년 7월 2일

grid는 2차원(행row와 열column)의 레이아웃 시스템으로 부모 요소(grid container)와 자식 요소(grid item)으로 구성되어 있다.
flex와 같이
1. 부모(grid-container), 자식(grid-item) 두가지 요소가 반드시 필요하다.
2. display: grid; 는 부모 요소에 적용 해야한다.

Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.
Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.

출처: https://free-eunb.tistory.com/86

grid container 속성: grid-template, grid-area, gap, justify-content, align-item 등
grid item 속성: grid-row, grid-column, justify-self, align-self 등

행과 열을 제어 하는법

grid-template-rows:;로 행을,
grid-template-column:;로 열을 제어할 수 있다.
grid-template: / ; 축약형

ex) 4행 만들기
<style>
 grid-template-rows: 200px 100px 50px 350px; /*1행, 2행, 3행, 4행의 높이값*/
</style>
다양한 단위값을 사용할 수 있으며, 생성할 열의 갯수만큼 크기를 작성하면 된다.

3열 만들기
<style>
 grid-template-column: 200px 100px 50px; /*1행, 2행, 3행의 가로값*/
</style>

4행 3열 만들기: 축약형 작성. 첫번째는 행의값 / 두번째는 열의값
<style>
 grid-template: 200px 100px 50px 350px / 200px 100px 50px;
</style>

행과 열의 크기가 동일하게 반복될 떼
작성 방식: repeat(반복 횟수, 크기);
<style>
 grid-template: repeat(3, 100px) / repeat(6, 1fr);
</style>
결과 3행 6열, 행의 높이는 100px, 열의 높이는 1fr의 값으로 생성.

정의한 셀 영역 외에 남는 셀에 적용하는 값
<style>
grid-auto-rows: auto; /* 기본값. 컨텐츠 크기*/
grid-auto-rows: 150px; 
grid-auto-colummns: 150px;
</style>
주로columns보단 rows를 많이 사용한다 (가로값이 남는 경우는 별로 없기 때문)

<style>
grid-auto-columns: min-content; /* 컨텐츠를 기준으로(텍스트 등) 가장 적은 부분의 내용에 따라 가로값 설정 */
grid-auto-columns: max-content; /* 컨텐츠를 기준으로 가장 많은 부분의 내용에 따라 설정 */
</style>

새롭게 배운 단위값 fr : frction(분수) 비율로 크기를 조정하는 값입니다.

에를들어 fr을 이용해 3열을 만들고 싶을 때
<style>
    .container{
        width: 90%;
        margin: 0 auto;
        border: 1px solid #000;
        display: grid;
        grid-template-columns: 1fr 2fr 3fr;
    }
    .box1{
        background-color: gray;
    }
    .box2{
        background-color: lightgray;
    }
    .box3{
        background-color: slategray;
    }
</style>
<body>
    <div class="container">
        <div class="box1 box">item1</div>
        <div class="box2 box">item2</div>
        <div class="box3 box">item3</div>
    </div>
</body>
이라고 작성하면 부모의 가로값 내에서 자동으로 1fr, 2fr, 3fr의 비율로 조정됩니다.

결과! 높이값은 주지 않았기 때문에 요소의 크기만큼 가졌고,
가로값이 부모 기준 1fr, 2fr, 3fr만큼으로 설정 되었습니다.

minmax( );라는 값을 사용할 수 도 있는데,

ex)
<style>
grid-template-columns: minmax(200px, 400px) 1fr 1fr; 
</style>
이라고 작성하면 3열이 만들어지고,
1열(최소값 200px 최대값 400px) 2열(1fr) 3열(1fr)이 되도록 만들어집니다.

minmax( ); 안에는 auto라는 값도 넣을 수 있습니다.
뜻은 무한정 작아짐, 무한정 커짐 입니다.
rows를 작성할 때 열의 높이값이 없으면 auto가 적용되지 않습니다 (웹에서 세로 스크롤은 무한정이기 때문)

행과 열 사이의 간격

<style>
row-gap: 1px; /* 행 사이의 간격 */
column-gap: 1vw; /* 열 사이의 간격*/
gap: 10px; /* 행, 열의 간격을 동일하게 줄 때*/
</style>

grid 설정하기

행과 열을 생성해주고 그리드 레이아웃 조정하기

크롬 개발자 도구를 열면 flex와 동일하게 grid 아이콘이 나타나는데,
클릭하면 grid의 번호를 확인할 수 있다. 숫자로 되어있음!

grid-item에 적용하기

작성 예시
<style>
행의 1번부터 3번까지 합칩니다.
grid-row-start:1;
grid-row-end:3;

열의 2번부터 4번까지 합칩니다.
grid-column-start:2;
grid-column-end:4;
</style>

start와 end는 축약형으로 작성하는 것이 편하다. 시작번호/끝번호 작성.
<style>
grid-row:1/3;
grid-column:2/4;
</style>

span을 이용해서 작성해도 된다. span 합칠칸;으로 작성 (띄어쓰기 필수)
<style>
grid-row:1/span 2;
grid-column:2/span 3;
</style>
으로 작성하면 위와 같은 값을 의미한다.

grid-row:1/3; 결과
grid-column:2/4; 결과
grid-row와 grid-column 동시 작성
grid-row:2/5;
grid-column:2/4; 결과

grid-item 정렬

justify-contents:;
align-contents:;

flex와 정렬 방법이 동일합니다. grid-container에 적용해야 함.

가로 정렬
<style>
justify-content: start; /* 기본값. 그리드 라인 시작 */
justify-content: end; /* 그리드 라인 끝 */
justify-content: center; /* 가운데 정렬 */
justify-content: space-between; /* 양 끝 정렬*/
justify-content: space-around; /* 여백 포함 동일한 간격 정렬 */
justify-content: space-evenly; /* 요소에 크기에 상관없이 동일한 여백. flex에는 없는 값 */
</style>

세로 정렬
<style>
align-content: start;  /* 기본값 */
align-content: end; 
align-content: center; 
align-content: space-around; 
align-content: space-between; 
align-content: space-evenly; 
</style>

가로, 세로 동시 정렬
<style>
/* flex에는 없는 값 */
/* align-content, justify-content 동시 작성 */
place-content: center; 
place-content: space-between;
</style>

grid-item 내에서 컨텐츠를 정렬

생성한 그리드 칸 내에서 컨텐츠를 정렬. 아이템 한 개를 기준으로 함.

가로 기준
<style>
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch; /* 기본값 */
</style>

세로 기준
<style>
align-items: stretch; /* 기본값 */
align-items: center;
align-items: start; 
align-items: end;
</style>

가로, 세로 동시 정렬
<style>
place-items: center;
place-items: start center;
</style>

item 개별 정렬

가로 기준
<style>
justify-self: start;
justify-self: end;
justify-self: stretch;
justify-self: center;
</style>

세로 기준
<style>
align-self: start;
align-self: end;
align-self: stretch;
align-self: center;
</style>

순서 설정 order

- item의 배치 순서 설정
- 각 item에 숫자로 속성을 부여하면 부여한 숫자 순서로 요소가 배치됨
- flex와 동일
<style>
.box1{order: 3;}
.box2{order: 1;}
.box3{order: 2;}
</style>]
box2, box3, box1 순서로 배치 된다.

auto-fit, auto-fill

auto-fit, auto-fill을 작성할 땐
auto-fit(fill), minmax()를 많이 작성
작성 예시
<style>
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
</style>

auto-fit

아이템의 크기를 늘려 전체를 채움(확장 시킴)

auto-fill

최대한 많은 아이템을 행에 채움. 여백이 남을 수 있음(확장 시키지 않음)

허용되지 않는 값들
- auto나 자동 비율조절 1fr의 값을 쓰면 작동되지 않음.
repeat(auto-fill, auto)
repeat(auto-fill, 1fr)
repeat(auto-fit, auto)
repeat(auto-fit, 1fr)
auto repeat(auto-fill, xxx)
1fr repeat(auto-fill, xxx)

auto-fit, auto-fill은 아직도 이해가 잘 가지 않는다 🤔
좀 더 공부 해야겠다..