CSS - GRID :: 아빠개발자의 노트

CSS - GRID

2019. 3. 4. 13:06

GRID - FLEXBOX랑 쓰는 방법은 비슷하지만

FLEXBOX의 한계점을 보완한다

justify-content : space-around;

flex-wrap : wrap;

같이 햇을경우 떨어지는것들에 대해서 조정하기가 어렵다.

등등 많은이유가 있지만 grid가 젤 많이쓰이고 다루기가 쉽다.

grid 는 flex 처럼 display : grid 라고 지정하고 시작한다.

l grid-template-columns : 50px | 1fr | 50rem // 자식들간의 세로 간격

l grid-template-row : 50px | 1fr | 50rem // 가로 간격

l grid-gap : 20px // 자식들간의 간격

◎ grid-template-columns 속성

▼ 내용

자식들의 column 의 갯수와 각각의 크기를 지정할수있다.

◎ grid-template-row 속성

▼ 내용

자식들의 row의 수와 각각의 크기를 지정할수 있다.

◎ grid-gap 속성

▼ 내용

자식들의 간격을 지정할수 있다.

    .father{
        display: grid; //grid라 설정해야 쓸 수 있다.
        grid-template-columns: 30px  50px  1fr; 
             //column 은 3개 각각의 크기에 맞게끔 설정
        grid-template-rows: 30px 2fr 1fr;
             //row 은 3개 각각의 크기에 맞게끔 설정
             //fr 은 현재의 크기에 맞춰서 설정 30px : 2 : 1 비율
        grid-gap: 20px; // 각 자식들과의 간격
        height : 100vh; // 현재 부모 컨테이노의 높이는 보이는화면 100%
    }
    .son {
        background-color: blue;
        color: white;
        font-size: 25px;
    }

l grid-auto-columns: 50px || 1fr

l grid-auto-rows : 50px || 1fr n

l grid-auto-flow: row || column // 기본값은 row

◎ grid-auto-columns 속성

▼ 내용

위에 grid-template-columns 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 row 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-row 속성

▼ 내용

위에 grid-template-rows 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 column 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-flow 속성

▼ 내용

grid-template-columns , grid-template-rows 에서 설정한 갯수 외에 자식 엘리먼트 들은

추가적으로 초과될경우 row에 붙을지 column에 붙을지 설정한다

row에 붙을경우 추가된 엘리먼트들은 row 에 붙고 column일경우 추가된 엘리먼트들은

column에 붙는다.

<html>
<head>
    <style>
    .father{
        display: grid;
        grid-template-columns: 80px  100px;
        grid-template-rows: 30px 50px;
        grid-auto-rows: 100px;
       /* 위에 설정한 갯수를 초과한 엘리먼트들은 위 사진처럼 추가된다 */
        grid-auto-flow: row;
       /* row 는 기본값이고 column 으로 설정할경우 추가엘리먼트들은 열로 추가된다 */
        grid-gap: 20px;
        height : 100vh;
    }
    .son {
        background-color: blue;
        color: white;
        font-size: 25px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
        <div class="son">9</div>
    </div>
</body>
</html>

반응형 단위

l fr : m // px와 같은 단위 fraction의 준말 분수,부분,일부 라는뜻

l repeat : (갯수,단위) // rows , columns 단위로 사용할수있다

l minmax : (최소값,최대값) // item의 크기의 최소값과 최대값을 정할수있다.

l min-content : // 사용할수있는 최소의 단위로 item의 크기를 지정

l max-content : // 사용할수있는 최대의 크기로 item의 크기를 지정

l auto-fit : // fit : 적당한

l auto-fill : // fill : 가득 넣다

◎ 단위 fr

▼ 내용

화면크기에 맞춰서 각각의 엘리먼트들이 설정한 비율에 맞게끔 된다.

        grid-template-rows: 3fr 2fr 1fr;
        grid-template-columns: 1fr 2fr 3fr;

◎ 단위 repeat 함수 repeat:(갯수 , 단위)

▼ 내용

grid-template-row 와 grid-template-columns 의 단위로 사용할수있다.

반복을 정해서 써준다.

grid-template-row 에서 4개의 엘리먼트의 1fr을 써주고싶으면

1fr 1fr 1fr 1fr; 은 비효율적이니 repeat(4,1fr); 이렇게 써서 반복을 몇번할지 정해준다

        grid-template-rows: 1fr 1fr repeat(2,4fr) 1fr;
        grid-template-columns: 1fr 2fr ;

◎ minmax , min-content , max-content

▼ 내용

max-content 를 쓰면 1개의 노드가 가질수 있는 최대의 크기를 가지며 차지한다

min-content 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

minmax (최소값,최대값) 창을 줄일경우 최소값만큼의 크기는 유지하며.

창이 클경우 최대값 만큼의 크기를 가진다

grid 에서 이런 값을 쓰면서 padding 이나 margin 같은걸 따로 설정할필요 없이

알아서 잡아줘서 편하다.

최소값 , 최대값 , 최소값 200px , 1fr

최소값 , 최대값 , 최대값 1fr , 1fr

        display: grid;
        grid-gap: 10px;
        grid-template-rows: repeat(2,1fr);
        grid-template-columns:  min-content max-content minmax(200px,1fr) 1fr;}

◎ auto-fit , auto-fill

▼ 내용

auto-fit 투명 grid를 안만들고 현재 있는 box로 조절한다

auto-fill 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

보통 크기 고정값인 px일 경우엔 큰 의미는 없으며 minmax 를 사용할경우 효과가보인다

grid-template-columns: repeat(auto-fit,minmax(50px,2fr));}
//auto-fit 은 투명 grid를 안만들며 창크기에 맞춰서 박스크기들을 늘리지만
grid-template-columns: repeat(auto-fill,minmax(50px,2fr));}
//auto-fill 은 투명 grid를 만들어 최소의 크기로 최대한 많은 박스들을 넣는다

l grid-template-areas: "name name name ~~" "name name ~"

◎ grid-template-areas 속성

▼ 내용

위에 grid-template-areas 에서 이름을 할당해주고 " " 로 구역 을 나눠주고나서

자식 엘리먼트들에게 grid-area: "name"; 이렇게 이름 할당을 하면

ares의 설정한 이름에 맞게 구역에 맞게 알아서 배치된다.

배치할떄 gap의 크기까지 같이 들어갈수도 있다. 반응형으로 적용된다.

--P/S 까추가적으로 grid-area : 1/4/5/-1; 이렇게 적을수도있다.

grid-area : rowstart / columnstart / rowend / columnend

--- 또는 grid-area : span 4 / span 3 (row /clumn) 이렇게 사용할수도 있다.

(왼) 개발자도구로 grid의 구역을 잘보여준다 ------------------------------------- (오)일반모습

<style>
    .father{
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 50px;
        grid-template-areas: "header header header"
                             "content content sidebar"
                             "content content sidebar"
                             "footer footer footer";}
        /*" " 로 묶은 것이 1row가 된다 이렇게 묶고 자식엘리먼트에게
         grid-area: name 을 써주면 grid적용이 알아서 적용되며 크기도 맞춰준다*/
    .son {background-color: blue; color: white;font-size: 25px;}
    .a{background-color: red; grid-area: header;}
    .b{background-color: yellow; grid-area: content;}
    .c{background-color: green; grid-area: sidebar;}
    .d{background-color: black; grid-area: footer;}
    .e{background-color: pink;}
    .f{background-color: blue;}
    .g{background-color: purple;}
    .h{background-color: skyblue;}
    .i{background-color: peru;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son a">1</div>
        <div class="son b">2</div>
        <div class="son c">3</div>
        <div class="son d">4</div>
        <div class="son e">5</div>
        <div class="son f">6</div>
        <div class="son g">7</div>
        <div class="son h">8</div>
        <div class="son i">9</div>
    </div>
</body>

정렬

l align-content : start || end || center || space-arround || space-between

l justify-content : start || end || center || space-arround || space-between

l place-content : 는 align-content justify-content 를 한번에 사용할수 있다.

l align-items: start || end || center || stretch (기본값)

l justify-items: start || end || center || stretch (기본값)

l place-items : 는 align-items justify-items 를 한번에 사용할수 있다.

l line-naming 기술 : grid에 모든 line 에는 line 이름을 새길수 있따.

l order 기술 : flex의 order 처럼 순서를 정해줄수있다.

************** flex-start , flex-end 값도 사용되는대 왜 되는지 모르겠다***************

◎ align-content , justify-content , place-content 속성

▼ 내용

flex 의 내용하고 매우 비슷하다

flex에서 자세히 설명하였으니 각각의 값들의 속성을 볼려면

( https://blog.naver.com/dydals56789/221463967438 참조)

align-content 는 vertical (수직정렬) 을 조종할수 있다.

justify-content 는 horizontal (수평정렬) 을 조종할 수 있다.

place-content 는 첫번쨰 argument 는 align-content 두번쨰 argument justify-content 을 조종할 수 있다.

    .father{
        box-sizing: border-box;
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 100px;
        place-content: space-between center;
        height: 100vh;
        grid-template-columns: repeat(5,minmax(50px,100px));
        }
// place-content 로 justifu-content 는 이고 center
// align-content 는 spacebetween  라서 수직은 가운데 수평은 양끝

◎ grid-column , grid-row 속성

▼ 내용

grid-column , grid-row 둘다 부모 content가 아닌 자식 box 에 사용한다.

(flex 의 align-self 랑 비슷해보임)

grid-column 는 {grid-column : 1 / 5 } 이런식으로 표기하며 1번쨰라인부터 5번째라인 전

까지 Column을 표시한다 라는 뜻이다. 한줄로 grid를 다채우고싶으면 end에 -1일 주면된다.

grid-row 는 grid - column 에서 열이 행으로 바뀐것 뿐이지 똑같이 사용한다.

P.S 1 : grid-column : 1 / 5 대신 grid-column-start : 1; grid-column-end: 5; 이렇게 나눌수 있다.

P.S 2 : grid-column-start : 5; grid-column-end: 2; 이렇게사용하여 거꾸로 사용할수도 있다.

P.S 3 : grid-column-start : 5 end 없이 start만 쓸경우 1열만 사용된다.

P.S 4 : grid-column-start 양수는 왼쪾 라인 기준으로 1234 지만 음수는 우측에서부터시작한다.

P.S 5: grid-column : span 5 // span을 쓰면 첫번째부터 5번쨰 박스까지 차지한다. (양수만가능)

.a{ grid-row : 1/5; }
.b{ grid-column-start: 3; grid-column-end: 5;}

◎ line naming 속성

▼ 내용

모든 line 에는 nameing 을 할수있다.

line에 nameing을 하여서 row-grid 나 column-grid 에 사용할수 있다.

<html>
<head>
<style>
    .father{
        box-sizing: border-box;
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 100px;
        height: 100vh;
        grid-template-columns: [a-line] 1fr [b-line] 2fr [c-line] 1fr [d-line];
        grid-template-rows: [ra-line] 1fr [rb-line] 2fr [rc-line] 3fr [rd-line] 1fr [re-line];
        }
    .son {font-weight: 600px; text-align: center; font-size: 25px;
        display: flex; justify-content: center; align-items: center;
        color: white;}
    .a{background-color: red; grid-column: b-line/d-line;}
    .b{background-color: blue;}
    .c{background-color: green; grid-row: rb-line / re-line;}
    .d{background-color: black;}
    .e{background-color: pink;}
    .f{background-color: yellow;}
    .g{background-color: purple;}
    .h{background-color: skyblue;}
    .i{background-color: peru;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son a">1</div>
        <div class="son b">2</div>
        <div class="son c">3</div>
        <div class="son d">4</div>
        <div class="son e">5</div>
        <div class="son f">6</div>
        <div class="son g">7</div>
        <div class="son h">8</div>
        <div class="son i">9</div>
    </div>
</body>
</html>

◎ grid-auto-flow 속성

▼ 내용

위의 그림처럼 빈칸으로 생긴 grid 를 채우는 속성이다.

grid의 순서를 row로 오름차순할지 column 으로 오름차순할지 정할수있다.

값으로 dense 로 사용할경우 빈칸이 다찬다.

.father{
     grid-auto-flow: dense;
}

◎ justify-self , align-self , place-self 속성

▼ 내용

justify-self 한item에서 content 를 수평 조종

align-self 한item에서 content 를 수직 조종

place-self 한item에서 content 를 수직,수평 사용

    .son:nth-child(4){background-color: black; place-self: center center;}
    .son:nth-child(5){background-color: pink; justify-self: center;}
    .son:nth-child(6){background-color: yellow; align-self: center;}

grid 연습하기!

http://cssgridgarden.com/#ko

https://caniuse.com/

최신기술 css-grid 같은 신기술들이 브라우저에서 어느버전까지 지원하는지를 알려준다.

Can I use... Support tables for HTML5, CSS3, etc

HTML5 accept attribute for file input Attributes for form submission Audio element Audio Tracks Autofocus attribute Canvas (basic support) Canvas blend modes classList (DOMTokenList) Color input type contenteditable attribute (basic support) Custom Elements v0 Custom Elements v1 Custom protocol hand...

caniuse.com

빨간색 : 사용불가

초록색 : 사용가능

노란색 : 부분적으로 지원

'디자인 > CSS' 카테고리의 다른 글

CSS - 타이포그래피 (0)	2019.03.04
CSS - box-sizing (0)	2019.03.04
CSS - multi-column (다단) (0)	2019.03.03
CSS - margin 겹침 (0)	2019.03.03
CSS - 우선순위 cascading(캐스캐이딩) (0)	2019.03.02

아빠개발자의 노트

CSS - GRID

'디자인 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바