CSS Grid Intro

description : CSS Responsive Web Design- Images
author : 오션
email : shlim@repia.com
lastupdate : 2021-07-02 Fri

The source of this article

CSS Grid Layout Module

Grid Layout

CSS Grid Layout Module은 행(rows)과 열(columns)이 있는 그리드 기반 레이아웃 시스템을 제공하여,
floats와 positioning을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.

Grid Elements

그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.

Example

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color:#2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255,0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>Grid Elements</h1>
 
  <p>
     A Grid Layout must have a parent element with the <em>display</em> property 
     set to <em>grid</em> or <em>inline-grid</em>.</p>
 
  <p>
     Direct child element(s) of the grid container automatically becomes grid items.
  </p>
 
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

Display Property

HTML 요소는 display 속성이 grid 또는 inline-grid로 설정되면 그리드 컨테이너가 됩니다.

Example

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;  /* 3개의 컬럼(세로 열)을 만들고, 자동으로 3개의 로우(가로 행)가 생성 */
      background-color: #2196F3;
      padding: 10px;
    }
 
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>The display Property:</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
 
  <p>
     Set the <em>display</em> property to <em>grid</em> to make a block-level grid container.
  </p>
</body>

Example

  <style>
    .grid-container {
      display: inline-grid;
      grid-template-columns: auto auto auto;  /* 3개의 컬럼(세로 열)을 만들고, 자동으로 3개의 로우(가로 행)가 생성 */
      background-color: #2196F3;
      padding: 10px;
    }
 
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>The display Property:</h1>
  <div class="grid-container">
    <!-- .grid-item$*9 엔터 클릭하면 아래와 같이 -->
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
 
  <p>
     Set the <em>display</em> property to <em>inline-grid</em> 
     to make a block-level grid container.
  </p>
</body>

Grid Columns

그리드 아이템의 수직선(공간)은 컬럼(columns)라고 합니다.

ref : The source of this png file is CSS Grid Intro

Grid Rows

그리드 아이템의 수평선(공간) 로우(rows)라고 합니다.

ref : The source of this png file is CSS Grid Intro

Grid Gaps

각각의 컬럼/로우 사이의 공간을 갭(gaps)이라고 합니다.

아래의 속성들을 사용하여 캡 사이즈를 조정할 수 있습니다.

grid-column-gap
grid-row-gap
grid-gap

Example

grid-column-gap 속성은 컬럼(세로 열) 사이의 간격을 설정합니다.

  <style>
    .grid-container {
      display: grid; 
      grid-column-gap: 50px;
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
 
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>The grid-column-gap Property:</h1>
 
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
 
  </div>
 
  <p>Use the <em>grid-column-gap</em> property to adjust the space between the columns.</p>
</body>

Example

grid-row-gap 속성은 로우(rows, 가로 행) 사이의 간격을 설정합니다.

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #2196f3;
      padding: 10px;
      grid-row-gap: 50px;
    }
 
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
 
</head>
<body>
 
  <h1>The grid-row-gap Property:</h1>
 
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
 
  <p>Use the <em>grid-row-gap</em> property to adjust the space between the rows.</p>
</body>

Example

grid-gap 속성은 grid-row-gap 및 grid-column-gap 속성에 대한 속기 속성(shorthand property)입니다.

  <style>
    .grid-container {
      display: grid;
      grid-gap: 50px 100px; /* rows and columns in order */
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>The grid-gap Property:</h1>
 
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
 
  <p>Use the <em>grid-gap</em> property to adjust the space between the columns <em>and</em>the rows.</p>
 
</body>

Example

grid-gap 속성을 사용하여 행 간격과 열 간격을 하나의 값으로 설정할 수도 있습니다:

  <style>
    .grid-container {
      display: grid;
      grid-gap: 50px; /* one value for both rows and columns */
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
 
  <h1>The grid-gap Property:</h1>
 
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
 
  <p>Use the <em>grid-gap</em> property to adjustthe space between the columns <em>and</em>the rows.</p>
 
</body>

Grid Lines

컬럼 사이의 라인들을 컬럼 라인(column lines)이라고 합니다.

그리드 컨테이너 내부에 그리드 아이템을 위치시킬 때 라인 넘버를 참조합니다.

Example

컬럼 라인 1에 그리드 아이템을 위치시키고, 컬럼 라인 3에서 종료하게 합니다.

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
 
    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
 
    .item1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  </style>
</head>
<body>
 
  <h1>Grid Lines</h1>
 
  <div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
  </div>
 
  <p>You can refer to line numbers when placing grid items.</p>
 
</body>

Example

로우 라인 1에 그리드 아이템을 위치시키고, 로우 라인 3에서 종료하게 합니다.

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
 
    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
 
    .item1 {
      grid-row-start: 1;
      grid-row-end:3;
    }
  </style>
</head>
<body>
 
  <h1>Grid Lines</h1>
 
  <div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
  </div>
 
  <p>You can refer to line numbers when placing grid items.</p>
</body>

All CSS Grid Properties

Property	Description
column-gap	컬럼(열) 사이의 간격을 지정합니다.
gap	행 간격 및 열 간격 속성에 대한 속기 속성
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 및 grid-auto-flow 속성에 대한 속기 속성
grid-area	그리드 아이템의 이름을 지정합니다. 즉 이 속성은 grid-row-start, grid-column-start, grid-row-end 및 grid-column-end 속성에 대한 속기 속성입니다.
grid-auto-columns	기본 컬럼 크기를 지정합니다.
grid-auto-flow	자동 배치된 항목이 그리드에 삽입되는 방법을 지정합니다.
grid-auto-rows	기본 행 크기를 지정합니다.
grid-column	grid-column-start 및 grid-column-end 속성에 대한 속기 속성
grid-column-end	그리드 아이템을 종료할 위치를 지정합니다.
grid-column-gap	컬럼 사이의 간격의 크기를 지정합니다.
grid-column-start	그리드 아이템을 시작할 위치를 지정합니다.
grid-gap	grid-row-gap 및 grid-column-gap 속성에 대한 속기 속성
grid-row	grid-row-start 및 grid-row-end 속성에 대한 속기 속성
grid-row-end	그리드 아이템을 종료할 위치를 지정합니다.
grid-row-gap	행 사이의 간격 크기를 지정합니다.
grid-row-start	그리드 아이템을 시작할 위치를 지정합니다.
grid-template	grid-template-rows, grid-template-columns 및 grid-areas 속성에 대한 속기 속성
grid-template-areas	명명된 그리드 아이템을 사용하여, 열과 행을 표시하는 방법을 지정합니다.
grid-template-columns	열의 크기와 그리드 레이아웃의 열 수를 지정합니다.
grid-template-rows	그리드 레이아웃의 행 크기를 지정합니다.
row-gap	그리드 행 사이의 간격을 지정합니다.

오션,, CSS, Grid, Layout, Module

목차

CSS Grid Intro

The source of this article

CSS Grid Layout Module

Grid Layout

Grid Elements

Example

Display Property

Example

Example

Grid Columns

Grid Rows

Grid Gaps

Example

Example

Example

Example

Grid Lines

Example

Example

All CSS Grid Properties