코딩하는 김딸기
그리드를 활용 안전한 안전성 유지/그리드 아이템의 수동 배치 + 셀 병합 본문
html 마크업 설정
<!DOCTYPE html>
<html>
<head>
<title>Coffee</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">sidebar</div>
<div class="contents">contents</div>
</div>
</body>
</html>
minmax를 사용하여 안전성 높임
/*COMPONENT*/
.container{
box-shadow: inset 0 0 20px RED;
height: 100vh;/*뷰포트의 100%높이*/;
display: grid;
justify-content: center;
align-content: center;
padding: 0 40px;
/*1번 칼럼은 244px로 고정, 2범 칼럼은 min-width를 0으로 초기화하고
max-width를 830px로 만들어 상황에 따라 작아질수 있게 함(고정값 아님)*/
grid-template-columns: 244px minmax(0,830px);/*고정값이 아니므로 창 작아지면 크기 줄어듦*/
grid-template-rows: minmax(600px, auto);/*최소600px, 컨텐츠 내용이 늘어나면 높이 커짐*/
}
-컨테이너보다 내부 컨텐츠가 커질 경우 이에 대한 안전성을 높임
/*COMPONENT*/
.container{
box-shadow: inset 0 0 20px RED;
min-height: 100vh;/*최소 뷰포트의 100%높이
그냥 height는 고정높이라 내부 컨텐츠가 heoght보다 많아졌을 때 넘침
=>내부 컨텐츠가 컨데이너 크기보다 많아지만 전체 높이 증가*/
box-sizing: border-box;/* min-height: 100vh에 상하단 패딩이 포함되면 스크롤 바가 생기므로 100vh에 상하단 패딩이 포함될 수 있게 조정*/
display: grid;
/*현재 그리드 컨테이너에서 가로세로 중앙 정렬*/
justify-content: center;
align-content: center;
padding: 0 40px;/*창 크기 작아졌을 때 패딩 설정*/
/*1번 칼럼은 244px로 고정, 2범 칼럼은 min-width를 0으로 초기화하고
max-width를 830px로 만들어 상황에 따라 작아질수 있게 함(고정값 아님)*/
grid-template-columns: 244px minmax(0,830px);/*고정값이 아니므로 창 작아지면 크기 줄어듦*/
grid-template-rows: minmax(600px, auto);/*최소600px, 컨텐츠 내용이 늘어나면 높이 커짐*/
}
<div class="wrapper">
<div class="grid">
<div class="item big ">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item long">5</div>
<div class="item ">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">1</div>
</div>
</div>
.wrapper{
max-width: 960px;
margin: 100px auto;
}
.grid{
box-shadow: inset 0 0 20px red;
aspect-ratio: 1/1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 20px;
grid-auto-flow: row;/*-> 방향으로 아이템 배열*/
}
.item{
background-color: orange;
padding: 20px;
font-size: 60px;
}
.item.big{
background-color: orangered;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
/*이때 auto는 브라우저가 판단하는 값이며 최대한 마크업 순서를 유지하려 노력한다*/
/*grid-column: 1/3; /*단축속성 1~3열*/
/*grid-row: 1/3; /*단축속성 1~3행*/
/*grid-column: 1/ span 2; /*단축속성 1~3열(1에서부터 2칸 차지)*/
}
.item.long{
background-color: blue;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 5;
/*2번 방법*/
/*grid-row-start: auto; */
/*grid-row: auto/ span 3; */
}
.item.wide{
background-color: green;
grid-column: 1/3;
/*2번 방법*/
/*grid-column: auto/ span 2; */
/*grid-row: auto; */
}
-마크업의 순서는 유지하고 span개념으로만 작성
