웹페이지의 레이아웃은 다양하며, 적절한 레이아웃은 웹페이지를 더욱 아름답게 만들 수 있습니다. CSS 그리드 레이아웃을 사용하면 간단한 설명이 포함된 그리드 레이아웃을 사용하여 복잡한 열을 만들 수 있습니다. 이번 글에서는 간단한 예시를 바탕으로 CSS의 그리드 레이아웃을 소개합니다.
먼저 컨테이너 프레임워크를 살펴보겠습니다.
#(id名){
display: grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}로그인 후 복사
또는
.(class名){
display: grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}로그인 후 복사
인트라넷 그리드를 설정하는 방법도 있습니다.
#(id名){
display: inline-grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}로그인 후 복사
또는
.(class名){
display: inline-grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}로그인 후 복사
Grid Frame(프로젝트 프레임)
그리드 프레임이 되는 요소에 대해 다음 CSS를 지정합니다.
#(id名){
grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;
grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
}로그인 후 복사
또는
.(class名){
grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;
grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
}로그인 후 복사
또는
#(id名){
grid-column-start: (列方向的网格的开始位置);
grid-column-end: (列方向的网格的结束位置);
grid-row-start: (行方向的网格的开始位置);
grid-row-end: (行方向的网格的结束位置);
}로그인 후 복사
또는
.(class名){
grid-column-start: (列方向的网格的开始位置);
grid-column-end: (列方向的网格的结束位置);
grid-row-start: (行方向的网格的开始位置);
grid-row-end: (行方向的网格的结束位置);
}로그인 후 복사
설명 예
그리드 선을 사용하여 그리드의 시작 및 끝 위치를 지정합니다.
아래 코드의 경우 셀의 너비는 두 번째 그리드의 세로선부터 네 번째 그리드의 세로선까지입니다.
grid-column: 2 / 4;
로그인 후 복사
코드 예제
다음 CSS, HTML 파일을 만듭니다.
SimpleGrid.css
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: #fffd70;
}
.GridItem4 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #b0ff70;
}
.GridItem5 {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color:#95a7f5
}
.GridItem8 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #d095f5;
}로그인 후 복사
SimpleGrid.html
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleGrid.css" />
</head>
<body>
<div class="Container">
<div class="GridItem1">内容1</div>
<div class="GridItem2">内容2</div>
<div class="GridItem3">内容3</div>
<div class="GridItem4">内容4</div>
<div class="GridItem5">内容5</div>
<div class="GridItem6">内容6</div>
<div class="GridItem7">内容7</div>
<div class="GridItem8">内容8</div>
</div>
</body>
</html>로그인 후 복사
지침:
아래 컨테이너의 CSS 설명은 4행 x 2행 그리드를 생성합니다.
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}로그인 후 복사
그리드의 각 요소에 대한 CSS는 (GridItem 1~GridItem 8)입니다. 각 그리드에 대한 그리드 셀을 정의합니다. 그리드의 각 셀에 대한 배경색을 변경합니다.
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}로그인 후 복사
결과 표시
위의 HTML 파일을 표시하려면 Firefox 브라우저를 사용하세요. 아래와 같은 효과가 표시됩니다. 2행 x 4열 그리드를 만들고 각 셀에 "item n" 문자열을 표시합니다. 또한, 셀의 배경색을 셀별로 설정할 수 있습니다.
마찬가지로 Google Chrome에도 동일한 파일이 표시됩니다. 아래와 같은 효과가 표시됩니다.
IE 브라우저에서는 그리드 표시가 완료되지 않고 표시가 축소됩니다.
모든 그리드에 셀이 없는 예
이전 예에서는 셀 내 모든 그리드에 대한 옵션이 있는 경우를 소개했지만, 모든 그리드에 항목이 하나라도 있으면 작동합니다. 다음은 그리드의 희소(이산) 셀의 예입니다.
Code
다음 CSS, HTML 파일을 만듭니다.
SimpleGridSparse.css
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
background-color:#E0E0E0;
}
.GridItem1 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #fffd70;
}로그인 후 복사
SimpleGridSparse.html
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleGridSparse.css" />
</head>
<body>
<div class="Container">
<div class="GridItem1">内容1</div>
<div class="GridItem2">内容2</div>
<div class="GridItem3">内容3</div>
</div>
</body>
</html>로그인 후 복사
지침:
다음 코드를 사용하면 그리드의 외부 프레임은 2행 × 4열의 그리드입니다.
display: grid;
grid-template-columns: 160px 160px 160px 160px;
grid-template-rows: 120px 120px;
로그인 후 복사
그리드의 셀 부분에 대한 CSS는 다음과 같습니다. 이번에는 2×4 8셀 그리드이지만 그 안에는 3개의 셀만 배열했습니다. 첫 번째 행의 두 번째 열에 컨테이너의 프레임을 지정하고, 두 번째 행에 있는 셀의 세 번째 열에 프레임을 지정하고, 첫 번째 행에 있는 셀의 네 번째 열에 있는 세 위치에 내용의 프레임을 지정합니다.
.GridItem1 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #fffd70;
}로그인 후 복사
그리드의 HTML 부분입니다. 그리드 프레임 내의 세 개의 div 프레임을 설명합니다.
<div class="Container">
<div class="GridItem1">内容1</div>
<div class="GridItem2">内容2</div>
<div class="GridItem3">内容3</div>
</div>로그인 후 복사
결과 표시
위의 HTML을 Firefox 브라우저에 표시합니다. 아래와 같은 효과가 표시됩니다. 콘텐츠 프레임은 CSS에서 지정한 위치에 배치됩니다.
Google Chrome에서 표시되는 효과는 다음과 같습니다.
위 내용은 CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
