[속성] grid 관련
학습일 : 2022. 09. 16
grid 관련
획일적인 레이아웃을 구성하기 위해 사용한다.
그리드 컨테이너가 가지는 자식들의 크기가 같거나 최소 크기의 배수일때 사용한다.
(주로) 가령, 유튜브나 에르메스 사이트.
주의 : 데이터를 담기 위해 그리드를 사용하면 안되며, 레이아웃을 구성하기 위해 테이블을 사용하여서는 안 된다.
그리드와 테이블의 역할은 다름.
그리드화 할 부모 요소의 'display' 속성 값을 'grid'로 지정하면 된다.
grid-template-columns 속성
그리드 컨테이너에 부여하는 속성으로, 열 크기의 비율(혹은 고정 크기)을 지정한다. (개수도 동시에 지정함)
열 크기의 비율은 fr(fraction) 단위를 이용한다.
가령, 크기가 같은 두 개의 열을 지정하기 위해 아래와 같이 사용한다.
grid-template-columns: 1fr 1fr;
다만, 열의 개수가 많다면 repeat() 함수를 이용하여 아래와 같이 사용한다.
grid-template-columns: repeat(8, 1fr); /* 1fr을 8번 반복함 */
위와 같이 적는 것은 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 라고 적는 것과 같다.
grid-template-rows 속성
그리드 컨테이너에 부여하는 속성으로, 행 크기의 비율(혹은 고정 크기)을 지정한다. (개수도 동시에 지정함)
행 크기의 비율은 fr(fraction) 단위를 이용한다.
가령, 크기가 같은 두 개의 행을 지정하기 위해 아래와 같이 사용한다.
grid-template-rows: 1fr 1fr;
다만, 행의 개수가 많다면 repeat() 함수를 이용하여 아래와 같이 사용한다.
grid-template-rows: repeat(8, 1fr); /* 1fr을 8번 반복함 */
위와 같이 적는 것은 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 라고 적는 것과 같다.
gap 속성
그리드 컨테이너에 부여하는 속성으로, 이가 가지는 자식들 간의 여유 공간을 지정한다.
그리드 컨테이너의 자식들 간의 여유 공간을 주기 위해서 'margin'을 사용하지 않는다.
속성 값을 하나만 주면 위/아래, 좌/우 여백을 설정한다. 가령 gap: 1rem; 을 지정하면 모든 여백을 1rem으로 설정한다.
속성 값을 공백으로 구분하여 두개 주면 각 값은 상/하, 좌/우 순서대로 적용된다. 가령 gap: 1rem 2rem; 을 지정하면
상/하 여백이 1rem, 좌/우 여백이 2rem이 된다.
grid-column-start, grid-column-end 속성
그리드 컨테이너 자식에게 부여한다.
'grid-column-start' 속성은 해당 그리드가 시작할 열 인덱스 번호를 지정한다.
'grid-column-end' 속성은 해당 그리드가 끝날 열 인덱스 번호를 지정한다.
grid-row-start, grid-row-end 속성
그리드 컨테이너 자식에게 부여한다.
'grid-row-start' 속성은 해당 그리드가 시작할 행 인덱스 번호를 지정한다.
'grid-row-end' 속성은 해당 그리드가 끝날 행 인덱스 번호를 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>GRID 관련</title>
<style>
html {
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
body {
align-items: center;
background-color: rgb(245,240,234);
color: rgb(68,68,68);
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: unset;
}
body > .box {
width: 100vw;
max-width: 81.25rem;
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 2rem 0 4rem 0;
}
body > .box > .title {
font-size: 2.25rem;
font-weight: 300;
margin: unset;
margin-bottom: 2rem;
}
body > .box > .item-container {
display: grid;
gap: 2rem 2.5rem;
grid-template-columns: repeat(4, 1fr);
list-style-type: none;
margin: unset;
padding: unset;
}
body > .box > .item-container.emple {
gap: 2.5rem 8.5rem;
}
body > .box > .item-container > .item {
filter: brightness(90%) grayscale(100%);
transition-duration: 250ms;
transition-property: filter, transform;
transition-timing-function: ease;
}
body > .box > .item-container > .item:hover {
filter: brightness(100%) grayscale(0%);
transform: scale(105%);
}
body > .box > .item-container > .item > .link {
align-items: stretch;
color: inherit;
display: flex;
flex-direction: column;
font-size: 1.125rem;
font-weight: 300;
justify-content: flex-start;
text-decoration: none;
}
body > .box > .item-container > .item > .link > .image {
width: 100%;
margin-bottom: 0.75rem;
}
body > .box > .item-container > .item > .link > .price {
font-size: 0.85rem;
margin-top: 0.325rem;
}
body > .collection > .item-container {
}
body > .scarf > .item-container > .item.big,
body > .buckle > .item-container > .item.big {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
@media screen and (max-width: 100rem) {
body > .box {
max-width: 70rem;
}
}
@media screen and (max-width: 80rem) {
body > .box {
max-width: 50rem;
}
body > .box > .item-container {
gap: 1rem 1.25rem;
}
body > .box > .item-container.emple {
gap: 1.25rem 4.25rem;
}
}
@media screen and (max-width: 60rem) {
body > .box {
max-width: calc(100vw - 4rem);
}
body > .box > .item-container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css">
</head>
<body>
<section class="box collection">
<h2 class="title">에르메스의 컬렉션</h2>
<ul class="item-container">
<li class="item">
<a class="link" href="#">
<img alt="여성복" class="image" src="resources/images/hermes_1.webp">
<span class="text">여성복</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="슈즈" class="image" src="resources/images/hermes_2.webp">
<span class="text">슈즈</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="여성 실크 제품" class="image" src="resources/images/hermes_3.webp">
<span class="text">여성 실크 제품</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="가방" class="image" src="resources/images/hermes_4.webp">
<span class="text">가방</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="워치" class="image" src="resources/images/hermes_5.jpg">
<span class="text">워치</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="남성 스카프" class="image" src="resources/images/hermes_6.webp">
<span class="text">남성 스카프</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="패션 주얼리" class="image" src="resources/images/hermes_7.webp">
<span class="text">패션 주얼리</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="장식 오브제" class="image" src="resources/images/hermes_8.webp">
<span class="text">장식 오브제</span>
</a>
</li>
</ul>
</section>
<section class="box scarf">
<h2 class="title">마법의 까레 스카프</h2>
<ul class="item-container emple">
<li class="item big">
<a class="link" href="#">
<img alt="" class="image" src="resources/images/scarf_1.webp">
<span class="text"></span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Botanica Grafica 숄 140" class="image" src="resources/images/scarf_2.webp">
<span class="text">Botanica Grafica 숄 140</span>
<span class="price">₩ 1,710,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Casaque en Biais 머플러" class="image" src="resources/images/scarf_3.webp">
<span class="text">Casaque en Biais 머플러</span>
<span class="price">₩ 1,130,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Double Face 스톨" class="image" src="resources/images/scarf_4.webp">
<span class="text">Double Face 스톨</span>
<span class="price">₩ 1,730,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Boutis 머플러" class="image" src="resources/images/scarf_5.jpg">
<span class="text">Boutis 머플러</span>
<span class="price">₩ 1,080,000</span>
</a>
</li>
</ul>
</section>
<section class="box buckle">
<h2 class="title">다채로운 버클</h2>
<ul class="item-container emple">
<li class="item big">
<a class="link" href="#">
<img alt="" class="image" src="resources/images/buckle_1.webp">
<span class="text"></span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Etriviere 32 벨트" class="image" src="resources/images/buckle_2.jpg">
<span class="text">Etriviere 32 벨트</span>
<span class="price">₩ 1,200,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="H Take Off 벨트 버클 & 리버서블 가죽 스트랩 32mm" class="image" src="resources/images/buckle_3.webp">
<span class="text">H Take Off 벨트 버클 & 리버서블 가죽 스트랩 32mm</span>
<span class="price">₩ 1,200,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Neo 벨트 버클 & 리버서블 가죽 스트랩 32mm" class="image" src="resources/images/buckle_4.webp">
<span class="text">Neo 벨트 버클 & 리버서블 가죽 스트랩 32mm</span>
<span class="price">₩ 1,200,000</span>
</a>
</li>
<li class="item">
<a class="link" href="#">
<img alt="Romain 35 벨트" class="image" src="resources/images/buckle_5.jpg">
<span class="text">Romain 35 벨트</span>
<span class="price">₩ 1,060,000</span>
</a>
</li>
</ul>
</section>
</body>
</html>
=====================실행결과==================