[CSS] 22-05-23 CSS 그리드 grid ☑

728x90

CSS 그리드 grid

flex와 grid의 차이

Flex는 한 방향 레이아웃 시스템(1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

출처 : https://studiomeal.com/archives/533

Grid 레이아웃을 만들기 위한 기본적인 HTML 구조

Flex와 마찬가지로, 컨테이너와 아이템만 있으면 됌.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,

자식 요소인 div.item들을 Grid Item(그리드 아이템)

Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작.

.container {
	display: grid;
}

그리드 용어 정리

출처 : https://studiomeal.com/archives/533

grid container, grid item, grid track, grid cell, grid line, grid number, grid gap, grid area

Grid의 속성들은 Flex와 마찬가지로,

1.컨테이너에 적용하는 2.속성 아이템에 적용하는 속성 으로 나뉜다.

그리드의 형태 정의

grid-template-rows

grid-template-columns

grid-template-rows는 행(row)의 배치 ▤

grid-template-columns는 열(column)의 배치 ▥

예) grid-template-columns: 200px 200px 500px;

column을 200px, 200px, 500px 을 만들겠다는 뜻

grid-template-columns: 1fr 1fr 1fr;

1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미

fr은 fraction(뜻은 여기로)인데요, 숫자 비율대로 트랙의 크기를 나눕니다.

*고정 크기와 가변 크기를 섞어 쓸 수도 있다. <혼합가능>

예) grid-template-columns: 100px 2fr 1fr;

아래처럼 하면 왼쪽의 첫번째 column은 100px로 고정되고, 나머지 두번째 세번째 column은 2:1의 비율로 유연하게 움직이게 됩니다.

repeat 함수

repeat는 반복되는 값을 자동으로 처리할 수 있는 함수입니다.

repeat(반복횟수, 반복값)

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

위 코드의 repeat(5, 1fr)은 1fr 1fr 1fr 1fr 1fr과 같다.

minmax 함수

최솟값과 최댓값을 지정할 수 있는 함수입니다.

minmax(100px, auto) 의미는

최소한 100px, 최대는 자동으로(auto) 늘어나게.. 입니다.

*아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고,

내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준 예시

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

auto-fill과 auto-fit

column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.

auto-fill 대신 auto-fit을 사용하면, 남는 공간을 채웁니다.

간격만들기

row-gap / column-gap / gap

그리드 셀 사이의 간격을 설정합니다.

그리드 형태를 자동으로 정의

grid-auto-columns

grid-auto-rows

grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성

속성 이름이 헷갈린다면 -template- 자리에 – auto-가 들어간다고 생각하라

각 셀의 영역 지정

grid-column-start

grid-column-end

grid-column

grid-row-start

grid-row-end

grid-row

출처 : https://studiomeal.com/archives/533

1부터 4까지의 Grid 라인 번호가 매겨져 있는데요, 바로 그 번호를 이용해서 column과 row의 범위를 결정.

column으로 살펴보면, grid-column-start가 시작 번호, grid-column-end가 끝 번호 .

grid-column은 start와 end 속성을 한번에 쓰는 축약형입니다.

영역 이름으로 그리드 정의

grid-template-areas

각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

위의 형태로 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 써주면 된다.

각 셀마다 공백을 하나씩 넣어서 구분해주면된다

header는 첫번째 row에서 3개의 column을 차지하니 맨 위에 3번 쓴 것.

빈칸은 마침표 또는 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 상관 없다.

각 영역의 이름 매칭 방법:

해당 아이템 요소에 grid-area 속성으로 이름을 지정↓

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */

자동 배치

grid-auto-flow

아이템이 자동 배치되는 흐름을 결정하는 속성입니다.

세로 방향 정렬

align-items

아이템들을 세로(column축) 방향으로 정렬합니다. 컨테이너에 적용합니다.

가로 방향 정렬

justify-items

아이템들을 가로(row축) 방향으로 정렬합니다. 컨테이너에 적용합니다.

place-items

align-items와 justify-items를 같이 쓸 수 있는 단축 속성

.container {
	place-items: center start;
}

아이템 그룹 세로 정렬

align-content

Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Grid 아이템들을 통째로 정렬

아이템 그룹 가로 정렬

justify-content

Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬

place-content

align-content와 justify-content를 같이 쓸 수 있는 단축 속성

개별 아이템 세로 정렬

align-self

해당 아이템을 세로(column축) 방향으로 정렬합니다. 아이템에 적용합니다.

개별 아이템 가로 정렬

justify-self

해당 아이템을 가로(row축) 방향으로 정렬합니다. 아이템에 적용합니다.

place-self

align-self와 justify-self를 같이 쓸 수 있는 단축 속성

배치 순서

order

각 아이템들의 시각적 나열 순서를 결정하는 속성이에요.

숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. "시각적" 순서,HTML 자체의 구조를 바꾸는 것은 아님

z-index

Z축 정렬

숫자가 클 수록 위로 올라옵니다.

(position에서의 z-index랑 똑같이 생각하시면 됩니다.)

.item:nth-child(5) {
	z-index: 1;
	transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

정리 내용 출처 ↓

이번에야말로 CSS Grid를 익혀보자

studiomeal.com

CSS 그리드 설명 코드 ↓

grid-template-columns : 200px 200px 200px

column열의 크기

grid-template-rows : 200px 200px 200px

row 행의 크기

grid-template-columns : 1fr 1fr 1fr;

혼합가능

grid-templat-colums: repeat(3, 1fr);

반복생성 (1fr을 3번)

grid-template-colums: 100px 200px auto;

절대값 100px 과 200px 제외하고 자동조절

grid-template-colums: repeat(auto-fill, minmax(20% auto));

각 셀이 20 % 로 자동조절 = 20%*5 =100%이므로 5개의 셀이 생성되며

auto-fill대신 auto-fit 사용시 모자란셀 자동채움

row-gap: 10px;

row의 간격을 10px로

grid-auto-rows: minmax(100px, auto);

100px 보다 크면 자동으로 크기조절

align-items : strech;

세로방향으로 정렬

justify-items: strech;

가로방향으로 정렬

예제1.그리드레이아웃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display:grid;
            grid-template-columns: 200px 200px;
            /* 세로로 200픽셀씩 자릅니다 */
            /* columns (열)의 크기 */
        }
        [class*=cell] {
            box-sizing :border-box;
            border: 5px solid black;
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cell-a">cell a</div>
        <div class="cell-b">cell b</div>
        <div class="cell-c">cell c</div>
        <div class="cell-d">cell d</div>
    </div>
</body>
</html>

예제2.셀배치하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template: 200px 200px 200px / 200px 200px 200px;
            /* grid-templateCSS 속성은 그리드 열 , 행 및 영역 을 정의하기 위한 약식 속성 입니다 . */
            grid-gap: 10px;
            /* CSS gap 속성은 행과 열 사이의 간격(거터)을 설정합니다 */
        }
        [class*=cell] {
        border-sizing: border-box;
        border: 5px solid black;
        border-radius: 10px;
        padding: 10px;
        }
        .cell-a {
            grid-row-start: 1;
            grid-row-end: 4;
            /* grid-row-start항목이 시작될 행 행을 정의합니다. */
                        /* 행으로 1번부터 4번까지 차지합니다 */
            grid-column-start: 1;
            grid-column-end: 3;
                /* 열로 1번부터 3번까지차지합니다 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cell-a">cell a</div>
        <div class="cell-b">cell b</div>
        <div class="cell-c">cell c</div>
        <div class="cell-d">cell d</div>
    </div>
</body>
</html>

예제3. 문자열로 배치

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 기본초기화 */
            margin: 0;
            padding: 0;
        }
        .container {
            /* 너비고정 and 중앙정렬 */
            width: 960px;
            margin: 0 auto;
            /* 그리드구성하기 */
        display : grid;
        grid-template: 70px 1fr 70px / 200px 1fr
        /* fr이란 유연한 크기를 갖는 단위입니다.
그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.
사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다. */

        grid-gap: 5px;
        grid-template-areas:
        'header header'
        'aside content'
        'footer footer';}
        /* grid-template-areasCSS 속성은 명명된 격자 영역 을 지정하고 격자에 셀을 설정하고 이름을 할당합니다. */

        [class*=cell] {
            box-sizing : border-box;
            border: 5px solid black;
            padding : 10px;
            border-radius: 10px;
        }

        .cell-header {grid-area : header;}
        .cell-aside {grid-area : aside;}
        .cell-content {grid-area : content;}
        .cell-footer {grid-area : footer;}
    </style>
</head>
<body>
    <div class="container">
        <div class="cell-header">
<h1>Lorem ipsum dolor sit amet </h1>
        </div>
<div class="cell-aide">
<p>Lorem ipsum</p>
<p>dolor sit amet</p>
<p>Lorem ipsum</p>
<p>dolor sit amet</p>
</div>
<div class="cell-content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="cell-footer">Lorem ipsum dolor sit amet</div>
</div>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'STUDY > HTML5 CSS3' 카테고리의 다른 글

[CSS] 22-05-23 gridgarden 공략 ☑ (0)	2022.06.02
[HTML CSS] 22-05-23 UI 레이아웃 / 미디어 쿼리 ☑ (0)	2022.06.02
[CSS] CSS3 효과 애니메이션 ☑ (0)	2022.06.02
[HTML] 입력양식태그 공간분할태그 ☑ (0)	2022.06.02
[HTML] 기본태그와 멀티미디어 태그 ☑ (0)	2022.06.02

'STUDY > HTML5 CSS3' 카테고리의 다른 글

티스토리툴바