|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h1>Grid layout grid system</h1>
<div class="container">
<div class="grid">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
</div>
</div>
|
cs |
.container {
width: 1000px;
border: 3px solid red;
padding: 1rem;
}
.grid {
display: grid;
height: 430px;
width: 1000px;
grid-template-rows: repeat(4,1fr); //가로로 4줄로 쌓인다 ( 1fr = 같은비율로 )
grid-template-columns: 100px 100px 100px 세로로 3줄로 나뉜다 ( 픽셀로도 표현 가능)
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.item {
background-color: crimson;
text-align: center;
font-size: 2rem;
font-weight: bold;
}
.item:nth-child(even) {
background-color: yellow;
}
.item-1 {
grid-row: 1;
grid-column :1/4; //1지ㅣㅣ점부터 4지점까지
}
.item-2 {
grid-row: 2/5;
grid-column-start: 1; //시작 지점
}
.item-3 {
}
.item-6 {
grid-column: 2/4; //두번째 부터 4번째 까지
grid-row: 3/4; //3번째 부터 4번째 까지
}
.item-8 {
grid-column: 1/4;
grid-row: 5;
}실습 코드팬
https://codepen.io/BaeHaram/pen/JjdZWoQ?editors=1100
'HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| 제이쿼리 버튼 한개로 디스플레이 와 텍스트 토글 기능 (0) | 2021.11.18 |
|---|---|
| 스크롤값, 윈도우 높이, 문서 높이 구하기 (2) | 2021.11.11 |
| 클래스에 innerHTML 로 html 코드 추가하기 (0) | 2021.10.14 |
| bxslider 에 돋보기 기능 구현 (1) | 2021.10.12 |
| html 에서 마우스 오버시 이미지 전환하는 코드 (0) | 2021.07.15 |