그리드 레이아웃 가이드, 데모 - by. UXKM

2024-07-30

4.5.7. box정렬 가이드

요약 설명
Box 정렬(Alignment)의 일부 동작은 레이아웃 방법에 따라 달라집니다.
CSS Grid / Flexbox의 각 레이아웃 방법에 따라 아이템 정렬이 어떻게 다르게 설정 되는지 비교해봅니다.

4.5.7.1. box 정렬의 핵심 개념

컨테이너 요소는 포함하는 아이템 자식 요소를 정렬할 수 있습니다. 정렬의 유형을 세부적으로 구분하면 다음 3가지로 나눌 수 있습니다.

위치 정렬 - start, end, center 와 같은 키워드
기본 정렬 - baseline 키워드와 first/last 수정자(Modifiers)
분산 정렬 - stretch, space-between, space-around, space-evenly

이러한 키워드 값의 대부분은 문서의 쓰기 모드(Writing modes)와 관련되어 작동합니다.
글의 흐름이 좌 ⟹ 우 방향이라면 그리드 컨테이너의 왼쪽이 start 가 됩니다. 반대로 우 ⟹ 좌 방향이라면 오른쪽이 start가 됩니다.

4.5.7.2. block / inline 축(axis)

블록과 인라인 축은 다양한 방법으로 사용됩니다.
블록 축은 grid 사양의 컬럼(column) 축으로, flexbox 에서는 교차(cross) 축으로 사용됩니다.
인라인 축은 grid에서 로우(row) 축으로, flexbox에서는 주(main) 축으로 사용됩니다.
grid는 언제나 명시적인 행/열을 가지고 있어 축을 기준으로 하는 정렬에 대해 이해하기 쉽습니다.
하지만 flexbox는 주 축(main axis) 방향이 바뀔 때마다 정렬 기준이 변경된다는 점에 유의해야 합니다.

block 축 (수직)

grid - column 축

flexbox - cross 축
inline 축 (수평)

grid - row 축

flexbox - main 축

Block / Inline 축(Axis) — [ `Block / Inline` 축(Axis) ]

4.5.7.3. align-self / align-items

align-* 속성은 블록 축(수직 방향)과 관련된 속성입니다.
grid 레이아웃은 column 축에 해당되며, 명확하게 수직 방향으로만 정렬이 설정됩니다.
반면 flexbox는 flex-direction 속성 설정에 따라 교차 축의 방향이 바뀌기 때문에, 교차 축에 영향을 받는 align-* 속성의 정렬 또한 바뀝니다.

grid와 flex 비교

`grid`

정렬 컨테이너: Grid 영역(Area)

기본 동작: 일정 비율을 가진 아이템을 제외하고는 stretch가 설정된 것처럼 늘어난 형태로 동작합니다.

설정 가능한 값: auto, normal, start, end, center, stretch, baseline, first-baseline, last-baseline

허용 범위: 블록 / 컬럼(column) 축

예시: align-self의 기본 동작은 stretch 입니다.
start값을 설정하면 그리드 컨테이너 블록 축의 시작 부분에 정렬됩니다.

`flex`

정렬 컨테이너: 아이템이 있는 Flex 라인

기본 동작: stretch 값이 기본 입니다.

설정 가능한 값: auto, normal, flex-start, flex-end, center, stretch, baseline, first-baseline, last-baseline

허용 범위: 블록 / 교차(cross) 축

예시: align-self의 기본 동작은 stretch 입니다. flex-direction 설정 값에 따라 늘어나는 방향이 변경됩니다.
row일 경우 height, column일 경우 width로 설정됩니다.
start 값을 설정하면 교차 축의 시작 부분에 정렬됩니다.

4.5.7.4. justify-self / justify-items

justify-* 속성은 인라인 축(수평 방향)과 관련된 속성입니다.
grid 레이아웃은 row 축에 해당되며, 명확하게 수 방향으로만 정렬이 설정됩니다. 반면 flexbox 에는 justify-self, justify-items과 같은 속성을 지원하지 않습니다.
개별 아이템을 주 축 방향을 기준으로 정렬하고자 한다면 margin 속성을 사용 합니다.

grid와 flex 비교

`grid`

정렬 컨테이너: Grid 영역(Area)

기본 동작: 일정 비율을 가진 아이템을 제외하고는 stretch가 설정된 것처럼 늘어난 형태로 동작합니다.

설정 가능한 값: auto, normal, start, end, center, stretch, baseline, first-baseline, last-baseline

허용 범위: 인라인 / 행(row) 축

예시: justify-self의 기본 동작은 stretch 입니다.
start값을 설정하면 그리드 컨테이너 인라인 축의 시작 부분에 정렬됩니다.

`flex`

justify-self 속성은 Flexbox에 적용되지 않습니다.
주 축에 여러 아이템이 존재해 이들 중 하나를 조정할 수 없습니다. 주 축에 콘텐츠를 정렬하고자 한다면 아래 작성된 justify-content 속성을 참고하세요.

인라인 축에 하나의 아이템만 정렬하고자 한다면, margin 속성을 사용해 아이템을 정렬할 수 있습니다.

4.5.7.5. align-content

align-content 속성은 블록 축(수직 방향)과 관련된 속성입니다.
grid 레이아웃은 column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다.
flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.

grid와 flex 비교

`grid`

정렬 컨테이너: Grid 컨테이너(Container)

기본 동작: 일정 비율을 가진 아이템을 제외하고는 stretch가 설정된 것처럼 늘어난 형태로 동작합니다.

설정 가능한 값: normal, start, end, center, stretch, space-between, space-around, space-evenly, baseline, first baseline, last baseline

허용 범위: 블록 / 열(column) 축

요구 조건: 그리드 컨테이너의 여유 공간

예시: 그리드 트랙 크기가 컨테이너 크기보다 작은 경우, 시작 부분에 정렬됩니다.
space-between 값을 설정하면 블록 축(수직 방향)을 기준으로 공간을 분산 정렬합니다.

`flex`

정렬 컨테이너: Flex 컨테이너(Container)

기본 동작: stretch 값이 기본 입니다.

설정 가능한 값: normal, flex-start, flex-end, center, stretch, space-between, space-around, space-evenly, baseline, first baseline, last baseline

허용 범위: 블록 / 교차(cross) 축

요구 조건: 컨테이너가 아이템보다 표시할 수 있는 공간이 주어질 경우, 정렬을 사용할 수 있습니다.

예시: align-content 속성은 컨테이너에 여유 공간이 있을 때 공간을 분산 정렬하도록 설정할 수 있습니다.

4.5.7.6. justify-content

grid 레이아웃은 column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다.
flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.

grid와 flex 비교

`grid`

정렬 컨테이너: Grid 컨테이너(Container)

기본 동작: 일정 비율을 가진 아이템을 제외하고는 stretch가 설정된 것처럼 늘어난 형태로 동작합니다.

설정 가능한 값: normal, start, end, center, stretch, space-between, space-around, space-evenly, baseline, first-baseline, last-baseline

허용 범위: 인라인 / 행(row) 축

요구 조건: 그리드 컨테이너의 여유 공간

예시: 그리드 트랙 크기가 컨테이너 크기보다 작은 경우, 시작 부분에 정렬됩니다.
space-between 값을 설정하면 인라인 축(수평 방향)을 기준으로 공간을 분산 정렬합니다.

`flex`

정렬 컨테이너: Flex 컨테이너(Container)

기본 동작: Flexbox 주(main) 축의 기본 값이 flex-start 이기에 잡아 당긴 것처럼 늘어납니다.

설정 가능한 값: normal, flex-start, flex-end, center, stretch, space-between, space-around, space-evenly, baseline, first-baseline, last-baseline

허용 범위: 인라인 / 주(main) 축

요구 조건: 컨테이너가 아이템보다 표시할 수 있는 공간이 주어질 경우, 정렬을 사용할 수 있습니다.

예시: justify-content 속성은 컨테이너에 여유 공간이 있을 때 공간을 분산 정렬하도록 설정할 수 있습니다.

4.5.8. grid layout demo

grid layout

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
  <meta name="format-detection" content="telephone=no, address=no, email=no, date=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>UXKM CSS3 grid layout</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    .support {
      align-items: center;
      background: tomato;
      color: #fff;
      display: flex;
      font-size: .9rem;
      padding: 0 10px 0 0;
      position: fixed;
      right: 0;
      top: 0;
      width: auto;
      z-index: 100;
    }
    .support a {
      color: #fff;
      padding: 10px 0;
      text-decoration: none;
    }
    @supports (display: grid) {
      .support {
        background: #058a6e;
        right: 40px;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        transition: right .5s ease-in-out, -webkit-transform .5s ease-in-out;
        transition: right .5s ease-in-out, transform .5s ease-in-out;
        transition: right .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
      }
      .support:hover {
        right: 0;
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
      }
    }
​
    .support svg {
      fill: #ffffff;
      height: 30px;
      margin-right: 5px;
      padding: 5px;
      width: 30px;
    }
​
    .unsupported {
      display: block;
    }
    @supports (display: grid) {
      .unsupported {
        display: none;
      }
    }
​
    .supported {
      display: none;
    }
    @supports (display: grid) {
      .supported {
        display: block;
      }
    }
​
    main {
      display: grid;
      grid-gap: 2px;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(18vh, 1fr);
    }
    @media (min-width: 34em) {
      main {
        grid-template-columns: minmax(3rem, 1fr) minmax(50px, 100px) minmax(50%, 70ch) minmax(50px, 100px) minmax(3rem, 1fr);
      }
    }
​
    main div:nth-of-type(1) {
      background-color: #800f8a;
      grid-column: 1;
      grid-row: 1;
    }
    main div:nth-of-type(2) {
      background-color: #750f8a;
      grid-column: 2;
    }
    @media (min-width: 34em) {
      main div:nth-of-type(2) {
        grid-row: 1 / span 2;
      }
    }
    main div:nth-of-type(3) {
      background-color: rgba(107, 15, 138, 0.6);
    }
    @media (min-width: 34em) {
      main div:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1 / span 3;
      }
    }
    main div:nth-of-type(4) {
      background-color: #610f8a;
    }
    main div:nth-of-type(5) {
      background-color: #570f8a;
    }
    main div:nth-of-type(6) {
      background-color: #4d0f8a;
    }
    main div:nth-of-type(7) {
      background-color: #420f8a;
    }
    main div:nth-of-type(8) {
      background-color: rgba(56, 15, 138, 0.6);
    }
    @media (min-width: 34em) {
      main div:nth-of-type(8) {
        grid-column: 2 / 5;
        grid-row: 3 / 4;
      }
    }
    main div:nth-of-type(9) {
      background-color: #2e0f8a;
    }
    main div:nth-of-type(10) {
      background-color: #240f8a;
    }
    main div:nth-of-type(11) {
      background-color: #1a0f8a;
    }
    main div:nth-of-type(12) {
      background-color: #0f0f8a;
    }
    @media (min-width: 34em) {
      main div:nth-of-type(12) {
        grid-column: 1 / -1;
        justify-self: stretch;
      }
    }
​
    body {
      background-color: #fff;
      color: #5e5c66;
      font-family: 'Nixie One', sans-serif;
      line-height: 1;
    }
​
    main {
      margin: 2vw 0;
    }
    main div {
      color: #fff;
      padding: 1rem;
    }
​
    h1, h2 {
      margin: 0;
    }
​
    h1 {
      font-family: 'Libre Baskerville';
      font-size: 4rem;
      font-weight: 700;
    }
​
    h2 {
      color: #595B5A;
      font-size: 1.5rem;
      font-weight: 400;
    }
​
    header {
      text-align: center;
      padding: 2rem 0 0 0;
    }
​
  </style>
</head>
<body>
  <header>
    <h1>CSS Grid</h1>
    <h2>A true layout tool for the web</h2>
  </header>
  <main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </main>
</body>
</html>

UXKM CSS3 grid layout

Reset초기 코드로 되돌립니다.
Download코드를 html 파일로 다운로드할 수 있습니다.
FullScreen에디터를 브라우저 기준 전체 화면으로 확장합니다. 조금 더 편리한 코딩이 가능합니다.

최소화Result Area를 최소화 합니다.
브라우저 전체화면Result Area를 브라우저 기준 전체 화면으로 확대합니다.
모니터 전체화면Result Area를 모니터 기준 전체 화면으로 확대합니다.
닫기Result Area를 닫습니다. Browser button을 클릭하여 기본 모드로 되돌릴 수 있습니다.

클릭 시 설명 창이 닫힙니다.

grid-auto-flow with out dense

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
  <meta name="format-detection" content="telephone=no, address=no, email=no, date=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>UXKM CSS3 grid-auto-flow with out dense</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{margin:20px;}
    .gallery{
      display:grid;
      grid-gap:10px;
      grid-template-columns:repeat(10, 1fr);
      grid-auto-rows:25px;
      /*grid-auto-flow:dense;*/
      font-family:arial;
      font-weight:bold;
    }
    li{display:grid; justify-items:center; align-items:center; background-color:#ccc;}
    li:nth-child(6n) {background:cornflowerblue; grid-column:span 6;}
    li:nth-child(8n) {background:tomato; grid-column:span 2;}
    li:nth-child(9n) {grid-row:span 2;}
    li:nth-child(18) {background:greenyellow; grid-column-end:-1;}
  </style>
</head>
<body>
  <ul class="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
  </ul>
</body>
</html>

UXKM CSS3 grid-auto-flow with out dense

Reset초기 코드로 되돌립니다.
Download코드를 html 파일로 다운로드할 수 있습니다.
FullScreen에디터를 브라우저 기준 전체 화면으로 확장합니다. 조금 더 편리한 코딩이 가능합니다.

최소화Result Area를 최소화 합니다.
브라우저 전체화면Result Area를 브라우저 기준 전체 화면으로 확대합니다.
모니터 전체화면Result Area를 모니터 기준 전체 화면으로 확대합니다.
닫기Result Area를 닫습니다. Browser button을 클릭하여 기본 모드로 되돌릴 수 있습니다.

클릭 시 설명 창이 닫힙니다.

grid-auto-flow: dense

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
  <meta name="format-detection" content="telephone=no, address=no, email=no, date=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>UXKM CSS3 grid-auto-flow:dense</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{margin:20px;}
    .gallery{
      display:grid;
      grid-gap:10px;
      grid-template-columns:repeat(10, 1fr);
      grid-auto-rows:34px;
      grid-auto-flow:dense;
      font-family:arial;
      font-weight:bold;
    }
    li{display:grid; justify-items:center; align-items:center; background-color:#ccc;}
    li:nth-child(6n) {background:cornflowerblue; grid-column:span 6;}
    li:nth-child(8n) {background:tomato; grid-column:span 2;}
    li:nth-child(9n) {grid-row:span 2;}
    li:nth-child(18) {background:greenyellow; grid-column-end:-1;}
  </style>
</head>
<body>
  <ul class="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
  </ul>
</body>
</html>

UXKM CSS3 grid-auto-flow:dense

Reset초기 코드로 되돌립니다.
Download코드를 html 파일로 다운로드할 수 있습니다.
FullScreen에디터를 브라우저 기준 전체 화면으로 확장합니다. 조금 더 편리한 코딩이 가능합니다.

최소화Result Area를 최소화 합니다.
브라우저 전체화면Result Area를 브라우저 기준 전체 화면으로 확대합니다.
모니터 전체화면Result Area를 모니터 기준 전체 화면으로 확대합니다.
닫기Result Area를 닫습니다. Browser button을 클릭하여 기본 모드로 되돌릴 수 있습니다.

클릭 시 설명 창이 닫힙니다.

grid-based 3-column layout with 2-column option

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
  <meta name="format-detection" content="telephone=no, address=no, email=no, date=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>UXKM CSS3 grid-based 3-column layout with 2-column option</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    html {
      font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust:     100%;
    }
​
    body {
      margin: 0;
    }
​
    img {
      display: block;
      border: 0;
      width: 100%;
      height: auto;
    }
​
​
    /*--------------------------------------------------------------
    Accessibility
    --------------------------------------------------------------*/
    /* Text meant only for screen readers */
    .screen-reader-text {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }
​
    .screen-reader-text:hover,
    .screen-reader-text:active,
    .screen-reader-text:focus {
      background-color: #f1f1f1;
      border-radius: 3px;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
      clip: auto !important;
      color: #21759b;
      display: block;
      font-size: 14px;
      font-weight: bold;
      height: auto;
      left: 5px;
      line-height: normal;
      padding: 15px 23px 14px;
      text-decoration: none;
      top: 5px;
      width: auto;
      z-index: 100000; /* Above WP toolbar */
    }
​
​
    /*--------------------------------------------------------------
    Typography
    --------------------------------------------------------------*/
    body,
    button,
    input,
    select,
    textarea {
      color: #404040;
      font-family: 'Helvetica', Arial, sans-serif;
      font-size: 18px;
      line-height: 1.5;
    }
​
    h1,
    h2,
    h3 {
      margin: 0;
      padding: 1em 0;
    }
​
    p {
      margin: 0;
      padding: 1em 0;
    }
​
    /*--------------------------------------------------------------
    General styles
    --------------------------------------------------------------*/
    .site {
      background: #ededed;
      min-height: 100vh;
    }
​
    .masthead,
    .main-content,
    .sidebar,
    .twin,
    .footer {
      padding: 1em 2em;
    }
​
    .main-content {
      background: white;
    }
    .masthead {
      background: #2185C5;
      color: white;
    }
​
    .sidebar {
      background: #FF7F66;
    }
​
    .twin {
      background: #2185C5;
    }
​
    .twin:last-of-type {
      background: #7ECEFD;
    }
​
    .colophon {
      padding: 2em;
      background: #3E454C;
      color: white;
    }
​
    .colophon a {
      color: white;
    }
​
    .colophon a:hover,
    .colophon a:focus {
      border-bottom: 1px solid white;
    }
​
    /*--------------------------------------------------------------
    If no grid support, limit width to 50em and center align
    --------------------------------------------------------------*/
    @supports not (display: grid) {
      .site {
        max-width: 50em;
        margin: 0 auto;
      }
    }
​
    /*--------------------------------------------------------------
    CSS Grid layout for wider screens, when browser supports grid:
    --------------------------------------------------------------*/
    @media screen and (min-width: 600px) {
      @supports (display: grid) {
​
        .site {
          display: grid;
          grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
          grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
        }
​
        .masthead,
        .colophon {
          grid-column: span 8;
        }
​
        .main-content {
          grid-column: 2/6;
        }
​
        .sidebar {
          grid-column: 6/8;
        }
​
        .twin {
          grid-column: 2/5;
          grid-row: 3/4;
        }
​
        .twin:last-of-type {
          grid-column: 5/8;
        }
​
      }
    }
  </style>
</head>
<body>
  <div class="site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
​
    <header class="masthead">
        <h2 class="site-title">Standard two-column layout</h2>
    </header><!-- .masthead -->
​
    <main id="content" class="main-content">
        <h2>Main content area</h2>
        <p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. 
          If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, 
          the two elements will swap spaces because CSS Grid honors text direction.</p>
    </main>
​
    <aside class="sidebar">
        <h3>The Sidebar</h3>
        <p>The sidebar typically contains things like:</p>
        <ul>
            <li>Links</li>
            <li>Menus</li>
            <li>Ads</li>
        </ul>
    </aside>
​
    <aside class="twin">
        This should take up half the space
    </aside>
    <aside class="twin">
        This should take up the other half of the space
    </aside>
​
    <footer class="colophon grid">
        <aside>&copy; 2020.</aside>
    </footer>
​
  </div>
</body>
</html>

UXKM CSS3 grid-based 3-column layout with 2-column option

Reset초기 코드로 되돌립니다.
Download코드를 html 파일로 다운로드할 수 있습니다.
FullScreen에디터를 브라우저 기준 전체 화면으로 확장합니다. 조금 더 편리한 코딩이 가능합니다.

최소화Result Area를 최소화 합니다.
브라우저 전체화면Result Area를 브라우저 기준 전체 화면으로 확대합니다.
모니터 전체화면Result Area를 모니터 기준 전체 화면으로 확대합니다.
닫기Result Area를 닫습니다. Browser button을 클릭하여 기본 모드로 되돌릴 수 있습니다.

클릭 시 설명 창이 닫힙니다.

Creating CSS Grid 소개 영상 (한글 자막)

출처 : https://youtu.be/lSKmkTesnkM

4.5.7. box정렬 가이드

4.5.7.1. box 정렬의 핵심 개념

4.5.7.2. block / inline 축(axis)

block 축 (수직)

inline 축 (수평)

4.5.7.3. align-self / align-items

grid와 flex 비교

grid

flex

4.5.7.4. justify-self / justify-items

grid와 flex 비교

grid

flex

4.5.7.5. align-content

grid와 flex 비교

grid

flex

4.5.7.6. justify-content

grid와 flex 비교

grid

flex

4.5.8. grid layout demo

grid layout

grid-auto-flow with out dense

grid-auto-flow: dense

grid-based 3-column layout with 2-column option

Creating CSS Grid 소개 영상 (한글 자막)

`grid`

`flex`

`grid`

`flex`

`grid`

`flex`

`grid`

`flex`