HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="basic-style.css">
<title>CSS Grid Example</title>
</head>
<body>
<div class="container">
<div class="item item2 color1">Item1</div> <!-- item2 클래스 추가 --!>
<div class="item color2">Item2</div>
<div class="item color3">Item3</div>
<div class="item color4">Item4</div>
<div class="item color5">Item5</div>
<div class="item color1">Item6</div>
<div class="item color2">Item7</div>
<div class="item color3">Item8</div>
<div class="item color4">Item9</div>
<div class="item color5">Item10</div>
</div>
</body>
</html>grid.css
출처: 드림코딩 유튜브
.item2 {
grid-column-start: 2;
grid-column-end: 4;
}결과
column 기준 2번째 줄 부터 4번째 줄 까지 item2가 차지하게 되었다.
.item2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}결과
row 기준 1번째 줄부터 3번째 줄까지 item2가 차지하게 되었다.
.item2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
}위에 4줄로 작성된 코드가 간소화 되었다.
기능과 의미는 위 코드와 동일하다
.item2 {
grid-column: 2 / span 2;
grid-row: 1 / 3;
}span을 통해 기준 셀로 부터 몇칸을 차지할것인지 지정할 수 있다.
.item2 {
grid-column: 2 / -1;
grid-row: 1 / 3;
}-1은 역방향 기준 첫번째 줄이다 그러니 정방향으로 생각해 보면 마지막 줄이다.
위 코드는 column 기준 2번째 줄부터 마지막 줄까지 차지한다는 의미이다.
이로써 자식요소(셀)의 속성을 지정하여 내가 원하는 영역을 차지하게 만들수 있다.
unsplash.com에서 저작권없는(?) 이미지를 무료로 다운로드 받을수 있다고 한다
부모요소에 지정할 속성과 자식요소에 지정할 속성에 대해 알아보았다
웹 페이지의 요소를 자유자제로 위치시키기 위한 기본적인 지식인 grid에 대해 완벽하게 숙지 한 이후에 라이브러리를 사용한다면 더욱 자유로운 개발이 될수 있지 않을까
React, Node.js, AWS, Git, Github, Github Action, Docker, K8S