12. Grid

1. Grid 2. Grid row / column 1) template 3. Gap 4. 각 셀의 영역 지정 실습1 실습 2 (실습) 전체 복습 코드 및 성배 레이아웃 그리기

1. Grid

수업은 chrome으로 나가지만 grid는 chrome이 아니라 firefox를 사용하시면 개발자 도구에서 좀 더 명확하게 확인할 수 있습니다.

display:grid;로 그리드 컨테이너와 아이템을 설정합니다.

그리드 컨테이너 : 그리드의 가장 바깥 영역

그리드 아이템 : 그리드 컨테이너의 자식 요소들

그리드 트랙 : 그리드의 행(row) 또는 열(column)

그리드 셀 : 그리드의 한 칸 (개념적인 정의)

그리드 라인 : 그리드 셀을 구분하는 선

그리드 넘버 : 그리드 라인의 각 번호

그리드 갭 : 그리드 셀 사이의 간격

그리드 에어리어 : 그리드 셀의 집합

2. Grid row / column

1) template

grid-template-columns : 열의 넓이를 설정합니다.

grid-template-rows : 행의 높이를 설정합니다.

repeat( 적용할 트랙의 갯수, 반복할 수치 ) 함수를 이용하면 그리드 트랙 별 수치 반복을 설정 할 수 있습니다.

3. Gap

1) row - gap

2) column-gap

3) grid-gap, gap


gap: 20px 5px;

✔ IE에서는 gap의 대체 속성이 없어서 IE에서의 사용을 고려한다면 처음부터 gap을 사용하지 말아야 합니다

4. 각 셀의 영역 지정

1) grid-column-start

2) grid-column-end

3) grid-column


/*item*/
.item {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-column : 1 / span 2;
}

4) grid-row-start

5) grid-row-end

6) grid-row


/*item*/
.item {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-row : 1 / span 2;
}

실습1

계산기 그리드 이용해서 만들어보기(만약 한다면 CSS 코드 수정 필요함)

코드


<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="./src/styles.css">
</head>

<body>
<div class="container">
		<div class="row-1">
        <input type="text" />
    </div>
		<div class="row-2">
        <button type="button" class="reset-btn">AC</button>
        <button type="button" class="etc-btn">+/-</button>
        <button type="button" class="percentage-btn">%</button>
        <button type="button" class="calc" value="divide">÷</button>
      </div>
      <div class="row-3">
        <button type="button" class="number">7</button>
        <button type="button" class="number">8</button>
        <button type="button" class="number">9</button>
        <button type="button" class="calc" value="multiply">×</button>
      </div>
      <div class="row-4">
        <button type="button" class="number">4</button>
        <button type="button" class="number">5</button>
        <button type="button" class="number">6</button>
        <button type="button" class="calc" value="minus">-</button>
      </div>
      <div class="row-5">
        <button type="button" class="number">1</button>
        <button type="button" class="number">2</button>
        <button type="button" class="number">3</button>
        <button type="button" class="calc" value="plus">+</button>
      </div>
      <div class="row-6">
        <button type="button" class="number">0</button>
        <button type="button" class="number">.</button>
        <button type="button" class="result-btn" class="result">=</button>
      </div>
</div>
</body>

</html>


body {
  font-family: sans-serif;
  box-sizing: border-box;
}

.container {
  padding: 10px;
  display: grid;
  grid-template-rows: repeat(6, 80px);
  gap: 10px;
  background: #000000;
}

div[class^="row"] {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 10px;
}

input {
  grid-column: 1 / span 4;
  text-align: right;
  background: #0000;
  border: none;
  color: #ffff;
  font-size: 55px;
}

input:focus {
  outline: none;
}

button {
  border-radius: 50%;
  font-size: 30px;
  border: none;
  background: #c4c4c4;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.4s;
}

.row-6 button:first-child {
  grid-column: 1/3;
  border-radius: 60px;
}

.number {
  background: #333333;
}

.calc,
.result-btn {
  background: #fe9f06;
  color: #fff;
}

.number:active,
.reset-btn:active,
.etc-btn:active,
.percentage-btn:active,
.result-btn:active {
  opacity: 0.6;
}

.calc:focus {
  background: #fff;
  color: #fe9f06;
}

실습 2

Grid : row 5, column5

margin : 10

gap : 10

image.zip

359.1KB

(위 image.zip 파일에 저장된 이미지는 pixabay.com에 있는 무료 이미지입니다.)

(실습) 전체 복습 코드 및 성배 레이아웃 그리기

002. grid.zip

8.4KB