CSS 기초 정리 - Grid

ㅎㅎ·2021년 4월 15일
CSS
0

HTML/CSS

목록 보기
4/5

: Code Academy CSS 정리

Grid?

: Whereas Flexbox is mostly useful for positioning items in a one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing many tools for aligning and moving elements across both rows and columns.

  • grid container and grid items. grid container is parent element and gris items is child elemenets.

📌Grid 에 적용하는 속성들

grid 만들기

  • To make grid container, you must set the element's displayproperty to grid(block-level) or inline-grid
  • 디폴트로 grid는 한개의 열을 가지고 있음. 따라서 grid를 만드려면 명시적으로 행과 열을 정의해야함.

grid-template-columns : 열 만들기

  • 숫자, % 사용. %를 쓸때는 width가 꼭 있어야함. 
<!-- 숫자로 정의 -->
.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 200px;
 }
 
<!-- %로 정의 -->  
  .grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
 }
 
<!-- 섞기 --> 
 .grid {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px;
}

grid- template-rows : 행 만들기

  • 숫자와 % 사용. %를 쓸때는 height이 꼭 있어야함. 
<!-- 섞기 -->
.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

grid-template

  • 위의 두 속성을 합치기. grid-template-columns, grid-template-rows
  • row / column
.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}

grid gap

  • grid-row-gap,grid-column-gap
  • 행과 열 사이의 갭을 만들어줌.
.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}
  • fraction : 총 높이와 너비를 부분으로 나누는 방법.
  • fr은 grid items가 grid를 넘치는 것을 방지해줌.
  • 또한 숫자나 %와 동시에 사용가능, 밑의 column 코드를 보면 두번째 열이 60px를 먼저 차지, 남은 공간 만큼을 첫번째 열 1fr, 세 번째 열 1fr 만큼 차지함. 
.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 60px 1fr;
}
  • repeat : repeat()은 행과 열을 반복 생성해줌. 
.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(3, 100px);
 
 <!-- (= grid-template-columns: 100px 100px 100px) -->
}
  • minmax : 브라우저의 크기가 바껴도, 행이나 열의 크기를 고정하고 싶을 때 사용함.
  • 밑의 코드에서 두번째 열은 언제나 100 에서 500사이를 벗어나지 않음.
.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

📌Grid Items에 적용하는 속성들

grid-row-start,grid-row-end / grid-column-start,grid-column-end

  • 다수의 행(열) 만들기.
  • 밑의 코드를 보면, start와 end는 grid line을 의미함.
    따라서 grid는 start가 1, end가 9이므로 grid는 8rows를 가지고 있음
.item {
  grid-row-start: 1;
  grid-row-end: 9;
}

Grid Row / Grid column

  • 위의 속성들을 줄인 것.
  • start / end
  • span은 행(열)이 얼마나 차지하는지 적용가능. 코드를 예시로 보면 start는 4이고 span는 2이므로 열은 총 4,5rows를 말함. span을 사용하면, 끝을 넘어가는 오류를 방지할수 있음.
<!-- 다 같지만 다르게 표현한 코드 -->
.item {
  grid-row: 4 / 6;
}
.item {
  grid-column: 4 / span 2;
}
.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

Grid Area

  • 순서대로 grid-row-start,grid-column-start,grid-row-end,grid-column-end를 한번에 사용할 수 있음.
  • 밑의 코드를 보면, item은 2에서 3rows ,3에서 8columns를 차지함. 
.item {
  grid-area: 2 / 3 / 4 / span 5;
}

Grid-template-areas

  • 쉽게 원하는 레이아웃을 만드는 방법.
  • grid-area로 영역의 이름을 붙이고, grid-tempate-areas를 이용해 레이아웃의 구조를 만들 수 있음.
  • 밑의 코드를 보면, 2columns 4rows의 형태로 레이아웃을 만듬.
<!-- html 5개의 구조-->
<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>
container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  <!-- 원하는 레이아웃 만들기(2columns 4rows) -->
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  <!-- 행과 열 크기 지정하기 -->
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

<!-- 각 영역의 이름짓기 -->
header {
  grid-area: head;
} 
 
nav {
  grid-area: nav;
} 
 
.info {
  grid-area: info;
} 
 
.services {
  grid-area: services;
}
 
footer {
  grid-area: footer;
}
  • overlapping element : elements 위에 element를 놓고 싶을때, 
img {
  grid-area: 2 / 3 / 5 / 5;
  z-index: 5;
}

📌Justify & Align

  • grid에는 2개의 축(axis)이 존재.
    • column(block) axis : top to bottom
    • row(inline) axis : left to right

justify-items

  • grid items들을 row axis로 위치시킴.
    • start : 왼에서 오
    • end : 오에서 왼
    • center : 가운데
    • stretch : grid area를 채움.

justify-content

  • grid item들의 너비가 grid container보다 클 때, grid item을 통째로 정렬.
    • start
    • end
    • center
    • stretch
    • space-around : grid items around(둘레)에 균일한 간격을 만듬.
    • space-between : grid items between(사이)에 ㅔ균일한 간격을 만듬
    • space-evenly : items와 양 끝에 균일한 간격을 만듬.

align-items

  • grid items(indivisual elements)들을 column axis로 위치시킴.
    • start,end,center,stretch

align-content

  • grid item들의 높이가 grid container보다 클 때, grid item을 통째로 정렬.
  • start,end,center,stretch,space-around,space-between,space-evenly

align-self / justify-self

  • single item(개별)을 정렬.
  • 두 속성 다 align-items와 justufy-items의 선언을 무시함.
  • start,end,center,stretch

grid-auto-rows / grid-auto-columns

  • there properties pecifies the height of rows(or width of columns) added implicitly to the grid.
  • grid를 자동으로 정의. 즉 row나 column 갯수를 모를 때 사용.

grid-auto-flow

  • grid item를 자동 배치해줌.
    • row : (디폴트) grid row를 기준으로 순서대로 배치가 되다가 들어갈 자리가 없으면 그 칸은 비우고 아래로 배치가 됨.
    • column : 세로를 기준으로 배치되다가 -
    • dense : 빈 공간없이 빡빡하게 -
    • row dense,colum demse 같이 결합도 가능함
profile
ㅎㅎ
이전 포스트

CSS 기초 정리 - Flex box

다음 포스트

[HTML] Semantic Web & Semantic Tag

0개의 댓글