문서의 이전 판입니다!

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

오션,, CSS, Grid, Layout, Module

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Grid Intro

The source of this article

CSS Grid Layout Module

Grid Layout

Grid Elements

Example

Display Property

Example

Example

Grid Columns

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Grid Intro

The source of this article

CSS Grid Layout Module

Grid Layout

Grid Elements

Example

Display Property

Example

Example

Grid Columns

문서 도구