CSS 그리드에 대한 간단한 가이드
4825 단어 css
CSS 그리드란?
그리드는 열과 행을 활용하여 반응형 웹 디자인 레이아웃을 만드는 CSS의 레이아웃 모듈입니다.
를 사용하는 경우 HTML에서 상위 컨테이너를 만들고 CSS에서 요소의
display
속성을 flex
또는 inline-flex
로 설정합니다.<div id="flex-container">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
display
속성이 grid
또는 inline-grid
인 Grid를 사용하는 것과 동일합니다.grid
는 컨테이너를 블록 수준 요소inline-grid
는 컨테이너를 인라인 수준 요소CodePen을 따라해보세요:
그리드 선은 그리드를 열과 행으로 나눕니다.
왼쪽에서 볼 수 있듯이 세로 및 가로 그리드 선은 1부터 시작합니다. 이것은 그리드 항목의 위치를 결정하는 데 사용할 수 있는 숫자 인덱스입니다.
음수 인덱스를 사용하여 그리드의 반대쪽 끝을 가져올 수도 있습니다.
그리드 셀은 그리드 행과 열이 교차하는 위치에서 정의되는 단일 단위입니다.
AGrid Track는 두 개의 인접한 그리드 선 사이의 공간이므로 기본적으로 열과 행입니다.
이것이 MDN에서 설명하는 방법입니다.
거터는 셀을 서로 분리하는 그리드 트랙을 분리하는 데 사용할 수 있습니다.
gap
속성을 사용하여 설정되며 아래에서 Explicit Grids로 설명하겠습니다.명시적 그리드, fr 및 반복
명시적 그리드는 정확한 행과 열 수로 명시적으로 정의된 그리드 레이아웃입니다.
그리드 컨테이너에서 이러한 속성을 선언합니다.
grid-template-columns
원하는 열 수를 지정하려면
grid-template-columns
를 사용하십시오.grid-template-columns: auto auto auto
는 컨테이너 너비에 걸쳐 있는 동일한 크기의 열 3개를 나타냅니다.grid-template-rows
원하는 행 수를 지정하려면
grid-template-columns
를 사용하십시오.grid-template-rows: 50px 50px 50px
는 각각 높이가 있는 세 개의 행을 나타냅니다.gap
gap
속성은 그리드 셀 사이에 여백을 설정하는 데 사용됩니다.이제 이러한 각 속성이 무엇을 하는지 알았으므로 속성 내에서 다양한 값을 사용할 수 있지만 px 또는 fr 중 하나를 사용하겠습니다.
fr
플렉시블 장치
fr
는 그리드에서 도입되었습니다. 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다.각각 크기가
1fr
인 세 개의 열이 있는 경우 그리드 컨테이너 내에서 크기가 동일합니다.repeat
repeat
함수는 열이나 행을 정의할 때 반복할 필요가 없도록 사용됩니다. 명시적으로 정의하려는 열 수와 해당 열의 크기에 대한 인수를 사용합니다.grid-template-columns: repeat(3, 1fr)
암시적 그리드
암시적 그리드는 명시적으로 정의된 트랙보다 더 많은 그리드 항목이 있을 때 사용되는 레이아웃입니다.
예를 들어 4개의 열과 2개의 행을 명시적으로 정의했지만 컨테이너에 들어갈 수 있는 것보다 더 많은 항목이 있는 경우 다른 열과 행으로 정의한 규칙을 사용하여 암시적 Grid가 생성됩니다.
그리드에 포함할 항목 수를 모르는 경우 전체 레이아웃이 암시적 그리드일 수 있습니다.
암시적으로 생성된 열과 행의 크기를 정의하려면 이전과 동일한 값으로 grid-auto-rows 및 grid-auto-columns를 사용할 수 있습니다.
암시적 네 번째 열이 없으면
grid-auto-columns
의 크기 조정이 작동하지 않습니다.grid-column
를 사용하여 암시적 네 번째 열을 만들 수 있습니다. grid-column
는 grid-column-start
& grid-column-end
의 줄임말입니다.그리드 선의 값을 사용하여 열을 시작하려는 위치와 끝을 원하는 위치를 지정해야 합니다. 이를 위해 속기를 사용합니다.
grid-column: 4 / 6
grid-column: starting-grid-line / ending-grid-line
속기에는 슬래시가 필요합니다.
추가 리소스:
Reference
이 문제에 관하여(CSS 그리드에 대한 간단한 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ethanmgustafson/simple-guide-to-css-grid-3cja텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)