grid

grid CSS 속성은 shorthand property 입니다. 외재적인 속성인 (grid-template-rows (en-US), grid-template-columns, grid-template-areas (en-US)), 값과 내재적인 속성인 (grid-auto-rows (en-US), grid-auto-columns (en-US), grid-auto-flow (en-US)), 값을 한번에 설정합니다.

시도해보기

참고: You can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

Syntax

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Values

<'grid-template'>

grid-template-columns, grid-template-rows (en-US), grid-template-areas (en-US) 값을 내포하고 있는 grid-template (en-US)의 값을 정의합니다.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

grid-template-rows (en-US) (and the grid-template-columns property to none)은 auto-flow 값을 설정합니다. grid-auto-columns (en-US) (and setting grid-auto-rows (en-US) to auto)은 auto-repeat를 설정합니다. grid-auto-flow (en-US) 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 dense 입니다.

만약 grid 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

grid-template-columns (and the grid-template-rows (en-US) property to none)은 auto-flow 값을 설정합니다. grid-auto-rows (en-US) (and setting grid-auto-columns (en-US) to auto)은 열(row)에 대한 auto-repeat를 설정합니다. grid-auto-flow (en-US) 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 dense 입니다.

만약 grid 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.

Formal syntax

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Example

HTML Content

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS Content

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Result

명세서

Specification
CSS Grid Layout Module Level 2
# grid-shorthand
초기값as each of the properties of the shorthand:
적용대상grid containers
상속no
Percentagesas each of the properties of the shorthand:
계산 값as each of the properties of the shorthand:
Animation typediscrete

브라우저 호환성

BCD tables only load in the browser

See also

  1. CSS
  2. CSS Reference
  3. CSS Grid Layout
  4. Guides
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
  5. Properties
    1. grid
    2. grid-area
    3. grid-auto-columns (en-US)
    4. grid-auto-flow (en-US)
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows (en-US)
  6. Glossary
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas (en-US)
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)