그리드 레이아웃
1. 그리드 레이아웃을 이해하려면 문서를 참조하세요.
CSS 그리드는 웹을 위한 2차원 레이아웃 시스템입니다. 그리드를 사용하면 콘텐츠의 형식을 행과 열로 지정할 수 있습니다. 그리드는 일련의 가로선과 세로선으로 구성된 레이아웃 패턴입니다.
문서 링크: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids
2. 사례를 바탕으로 분석
예제 링크: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction
예제를 재현하는 코드는 다음과 같습니다.
(1) 예시 코드
HTML 코드:
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
CSS 코드:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.box1 {
background-color: red;
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
background-color: brown;
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
background-color: gold;
grid-row: 2;
grid-column: 3;
}
프리젠테이션 효과:
(2) 코드의 단계별 분석
1. 상위 컨테이너 코드 분석
첫 번째 설정 표시: 상위 컨테이너에 대한 그리드; 그리드 레이아웃을 켭니다.
그리드를 형성하기 위해 상위 컨테이너의 행과 열의 수와 너비를 설정합니다:
Grid-template-rows: 100px 100px; 상위 컨테이너를 두 개로 나누는 것을 의미합니다. 행, 각 행의 높이는 100px입니다.
Grid-template-columns: 1fr 1fr 1fr;은 상위 컨테이너를 3개의 열로 나누는 것을 의미하며, 각 열의 비율은 1, 즉 상위 컨테이너의 1/3입니다. (fr 단위는 사용 가능한 공간을 비례적으로 나눕니다)
Grid-gap: 10px; 단위 그리드 사이의 간격이 10px임을 나타냅니다.
2. 상위 컨테이너 그리드 레이아웃 효과 표시
3. 하위 요소 코드 분석
보충: Grid -column 속성은 Grid-column-start와 Grid-column-end의 결합된 쓰기 방법이고, Grid-row는 Grid-row-start와 Grid-row-end의 결합된 쓰기 방법입니다.
지금 바로:
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
4. 하위 요소 아이콘 효과 분석
3. 그리드 레이아웃 실습
(1) 요건
일반적인 뉴스 형식 요구 사항에 따라 왼쪽에는 뉴스 표지 사진이 있고 오른쪽에는 상단과 하단 구조가 구분되어 있으며 제목 아래에 자세한 설명이 나와 있습니다.
(2) 분석
(3) 코드 구현
HTML 코드:
<div class="news">
<img class="image" src="../assets/picture.png">
<h2 class="title">新闻标题</h2>
<p class="description">我是新闻详细描述呀呀呀呀呀呀呀呀呀。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</div>
CSS 코드:
.news {
display: grid;
/* 由分析图是三行，每行的高度按需自由发挥，这里写40px是因为图片高度定为120px了 */
grid-template-rows: 40px 40px 40px;
/* 由分析图是两列，其中第二列差不多是第一列的三倍，这里根据图片大小占比进行比例换算*/
grid-template-columns: 120px 360px;
}
.image {
width: 120px;
height: 120px;
grid-row: 1;
grid-column: 1/2;
}
.title {
margin: 0;
grid-row: 1/2;
grid-column: 2;
}
.description {
text-align: start;
word-wrap: break-word;
margin: 0;
grid-row: 2/3;
grid-column: 2;
}
(4) 효과 표시
이것은 단지 저의 기본적인 이해와 사용법일 뿐입니다. 그리드 레이아웃에 대한 많은 속성이 문서에서 읽을 수 있어 이해가 가능합니다. 계속해서 함께 배워봅시다! ! !