CSS Grid 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
/* 사진 배열 연습 */
/* grid-template-columns : 열의 넓이를 설정 */
/* grid-temlpate-rows : 행의 높이를 설정 */
/* repeat(적용할 트랙의 갯수, 반복할 수치) */
ul{
display: grid;
height: 100vh;
> vh : 화면비 백분율 단위
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 10px;
}
li img {
width: 100%;
height: 100%;
}
.frist{
grid-column : 1 / 4;
grid-row : 1 / 3;
}
.second{
grid-column : 4 / 6;
grid-row : 1 / 4;
}
.third{
grid-column : 1/ 3;
grid-row : 3 / 4;
}
.forth{
grid-column : 3/ 4;
grid-row : 3 / 4;
}
.fifth{
grid-column : 1/ 3;
grid-row : 4 / 6;
}
.sixth{
grid-column : 3/ 6;
grid-row : 4 / 6;
}
</style>
</head>
<body>
<ul>
<li class="frist"><img src="image/1.jpg" alt=""></li>
<li class="second"><img src="image/6.jpg" alt=""></li>
<li class="third"><img src="image/2.jpg" alt=""></li>
<li class="forth"><img src="image/5.webp" alt=""></li>
<li class="fifth"><img src="image/3.webp" alt=""></li>
<li class="sixth"><img src="image/4.jpg" alt=""></li>
</ul>
</body>
</html>
Author And Source
이 문제에 관하여(CSS Grid 연습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jisu243/CSS-Grid-연습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)