Grid 심화

Grid Template Areas

 문자열을 값으로 받아들여서 , 보다 직관적으로 표를 구성할 수 있게 해주는 도구

 아래 예시의 경우 2열,  4행의 grid를 구성하는데 각각의 item에 이름을 미리 붙여주는 역할이라고 생각하면 된다. 

 

.container {

  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  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;
}

 

 

head	head
nav	nav
info	services
footer	footer

 

Justify Items

• start — aligns grid items to the left side of the grid area
• end — aligns grid items to the right side of the grid area
• center — aligns grid items to the center of the grid area
• stretch — stretches all items to fill the grid area

Justify Content

  

 justify items의 경우 그리드 포함한 부모요소 기준으로 정렬? 

 

• start — aligns the grid to the left side of the grid container
• end — aligns the grid to the right side of the grid container
• center — centers the grid horizontally in the grid container
• stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container
• space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
• space-between — includes an equal amount of space between grid items and no space at either end
• space-evenly — places an even amount of space between grid items and at either end

 

align-items

 align-items는 세로 축 기준으로 정렬

• start — aligns grid items to the top side of the grid area
• end — aligns grid items to the bottom side of the grid area
• center — aligns grid items to the center of the grid area
• stretch — stretches all items to fill the grid area

 

align-contents

• start — aligns the grid to the top of the grid container
• end — aligns the grid to the bottom of the grid container
• center — centers the grid vertically in the grid container
• stretch — stretches the grid items to increase the size of the grid to expand vertically across the container
• space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
• space-between — includes an equal amount of space between grid items and no space at either end
• space-evenly — places an even amount of space between grid items and at either end

 

Justify Self and Align Self

 

 

Q. 

 

 auto row , 암묵적 명시적 그리드 생성규칙이 헷갈림