집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 튜토리얼: 그리드 적응형 그리드 레이아웃에 그리드 레이아웃을 사용하는 방법

HTML 튜토리얼: 그리드 적응형 그리드 레이아웃에 그리드 레이아웃을 사용하는 방법

王林원래의: 2023-10-27 18:28:41790검색

HTML 튜토리얼: 그리드 적응형 그리드 레이아웃을 위해 그리드 레이아웃을 사용하는 방법, 특정 코드 예제가 필요합니다.

소개:
인터넷이 발전하면서 웹 페이지 레이아웃이 점점 더 중요해졌습니다. 테이블이나 플로팅 레이아웃 사용과 같은 기존 웹 페이지 레이아웃 방법에서는 적응형 효과를 얻기 위해 많은 코드와 조정이 필요한 경우가 많습니다. CSS3에 도입된 그리드 레이아웃은 그리드 적응형 그리드 레이아웃을 구축하는 보다 간결하고 유연한 방법을 제공합니다. 이 문서에서는 그리드 레이아웃의 기본 개념과 실제 적용을 소개하고 구체적인 코드 예제를 제공합니다.

그리드 레이아웃 소개
그리드 레이아웃은 웹 페이지의 콘텐츠를 행과 열로 나누어 그리드 레이아웃을 만들 수 있는 CSS3의 새로운 그리드 레이아웃 시스템입니다. 그리드 레이아웃은 그리드 컨테이너와 그리드 항목의 두 부분을 통해 구현될 수 있습니다. 그리드 컨테이너는 그리드 항목을 포함하는 상위 요소이고, 그리드 항목은 그리드 컨테이너 아래의 하위 요소입니다.
그리드 컨테이너 만들기
먼저 요소를 그리드 컨테이너로 정의해야 합니다. HTML에서는 <div> 요소를 사용하여 그리드 컨테이너 역할을 할 수 있습니다. 아래와 같이 <code><div>元素来充当网格容器。如下所示：<pre class='brush:html;toolbar:false;'><div class="container">  <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> </div></pre><ol start="3"><li>定义网格布局<br>通过为网格容器设置CSS属性<code>display: grid;，我们可以将其定义为网格布局。此外，还可以使用grid-template-columns和grid-template-rows属性来指定网格的列数和行数。例如，下面的代码将网格容器定义为含有3列和2行的网格布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

设置网格项的位置和大小
通过为网格项设置CSS属性grid-column和grid-row，我们可以指定每个网格项在网格布局中的位置。例如，下面的代码将网格项1位于第一列的第一行，网格项2位于第二列的第一行，网格项3位于第三列的第二行，网格项4位于第一列的第二行。

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2;
}

.item4 {
  grid-column: 1;
  grid-row: 2;
}

自适应网格布局
在Grid布局中，网格项的大小和位置是可以自适应调整的。我们可以使用grid-template-areas属性来指定每个网格项在网格布局中的位置，并通过使用.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}

display:grid;

grid-template-columns

grid-template-rows

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

grid-column

grid-row

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .item1 {
      grid-column: 1;
      grid-row: 1;
      background-color: red;
    }

    .item2 {
      grid-column: 2;
      grid-row: 1;
      background-color: green;
    }

    .item3 {
      grid-column: 1 / span 2;
      grid-row: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>

그리드 레이아웃에서는 그리드 항목의 크기와 위치를 적응적으로 조정할 수 있습니다. grid-template-areas 속성을 사용하여 그리드 레이아웃에서 각 그리드 항목의 위치를 지정하고 . 문자를 사용하여 공백을 나타낼 수 있습니다. 예를 들어 다음 코드는 그리드 컨테이너를 두 개의 열과 두 개의 행이 있는 그리드 레이아웃으로 정의하고 각 그리드 항목을 다른 위치에 배치합니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
  background-color: green;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
  background-color: blue;
}

반응형 그리드 레이아웃

위 내용은 HTML 튜토리얼: 그리드 적응형 그리드 레이아웃에 그리드 레이아웃을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 html display column

성명：