그리드 레이아웃 방법의 상세 예

앞의 말

그리드 레이아웃 방식은 그래픽 디자인의 그리드 시스템을 활용하여 화면에 그리드 선을 적용하는 방식으로, 하나의 정적인 페이지가 아닌 실제 그리드라고 할 수 있습니다. 이번 글에서는 그리드 레이아웃을 자세히 소개하겠습니다

소개

웹 개발자에게 웹 페이지 레이아웃은 언제나 중요한 이슈였습니다. 하지만 사실 오랜 기간 동안 웹 개발에서는 상대적으로 완전한 레이아웃 모듈조차 갖지 못했습니다. 일반적으로 웹 레이아웃은 다음 네 단계를 거쳤습니다:

　　1. 테이블 레이아웃, Dreamweaver 또는 손으로 쓴 테이블 라벨 레이아웃을 통해 테이블 ​​드래그

　　2. 요소 상자 모델 자체의 특성에 따른 부동 및 위치 위치 지정 레이아웃 그리고 레이아웃의 부동 위치 및 기타 속성

3. 혁명적인 혁신인 유연한 상자 모델 레이아웃은 기존 레이아웃 솔루션의 세 가지 주요 문제점인 배열 방향, 정렬 및 적응형 크기를 해결합니다. 현재 가장 성숙하고 강력한 레이아웃 솔루션입니다

　4. 2차원 레이아웃 모듈인 그리드 레이아웃은 강력한 콘텐츠 크기와 위치 지정 기능을 갖추고 있어 콘텐츠를 2차원으로 정렬해야 하는 레이아웃에 적합합니다

　그리드 레이아웃은 a 2차원 그리드 기반 레이아웃 시스템은 그리드 기반 사용자 인터페이스를 디자인하는 방식을 완전히 바꾸고 2차원 레이아웃 기능에서 웹 개발의 단점을 보완하는 것을 목표로 합니다.

Flex가 확장 가능한 컨테이너와 확장 가능한 프로젝트, 그리드도 그리드 컨테이너와 그리드 아이템으로 나누어집니다

Grid 컨테이너

display

display 속성을 통해 속성 값을 Grid 또는 inline-grid로 설정하여 그리드 컨테이너를 생성할 수 있습니다. 그리드 컨테이너의 모든 하위 요소는 자동으로 그리드 항목이 됩니다.

display: grid
display: inline-grid

　 그리드 항목은 기본적으로 행에 배치되고 그리드 컨테이너의 전체 너비에 걸쳐 나타납니다.

그리드 스타일 그리드

그리드 사용 -template-columns 및 Grid-template-rows 속성을 사용하여 그리드의 열과 행을 명시적으로 설정합니다.

[grid-template-rows]

기본값은 none입니다.

　grid-template -rows로 지정된 각 값은 각 행의 높이. 행의 높이는 음수가 아닌 모든 값이 될 수 있으며, 길이는 px, %, em 등과 같은 길이 단위의 값이 될 수 있습니다.

grid-template-rows: 60px 40px

　item1 및 item2의 높이는 60px 및 40px로 고정되어 있습니다. 각기. 두 행의 높이 값만 정의되어 있기 때문에 item3과 item4의 높이는 각자의 내용을 기준으로 정의됩니다.

【grid-template-columns】

기본값은 없음입니다.

행과 마찬가지로 각 열의 열 너비는 Grid-template-columns

grid-template-columns: 40px 50px 60px

item4 및 item5에서 지정한 각 값으로 생성됩니다. 새로운 행(두 번째 행)에 배치됩니다. Grid-template-columns는 세 개의 열 크기만 정의하기 때문에 각각 열 1, 열 2 및 열 3에 배치됩니다. 즉, 열 1, 열의 크기입니다. 2 및 열 3 크기는 item1, item2 및 item3의 너비와 같습니다. Item1, item2 및 item3에는 각각 40px, 50px 및 60px인 고정 너비 값이 있습니다. fr 단위는 팝업 그리드 트랙을 만드는 데 도움이 될 수 있습니다. 이는 그리드 컨테이너에서 사용할 수 있는 공간을 나타냅니다(Flexbox의 단위 없는 값과 마찬가지로)

grid-template-columns: 1fr 1fr 2fr

이 예에서 그리드 컨테이너는 4개의 동일한 부분(1 + 1 + 2 = 4)으로 나뉘며, 각 A 부분( 1fr)은 그리드 컨테이너 너비의 1/4입니다. 따라서 item1과 item2의 너비는 그리드 컨테이너 너비의 1/4이고 item3은 그리드 컨테이너 너비(2fr)의 2/4입니다.

grid-template-columns: 3rem 25% 1fr 2fr

fr 및 기타 길이 단위 값을 합치면 그리드 컨테이너에서 사용 가능한 공간을 기준으로 fr이 계산됩니다.

　이 예에서 그리드 컨테이너의 사용 가능한 공간은 그리드 너비에서 3rem 및 25%를 뺀 값이며, fr입니다. 이 크기 계산을 기반으로 합니다.

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3

fr和其它长度单位的值结合在一起的时候，fr是基于网格容器可用空间来计算。

　　在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr

【minmax()】

　그리드 트랙의 최소 또는 최대 크기는 minmax() 함수를 통해 생성할 수 있습니다. minmax() 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 그리드 궤도의 최소값을 정의하고, 두 번째 매개변수는 그리드 궤도의 최대값을 정의합니다. 어떤 길이 값도 허용되며, 자동 값도 허용됩니다. auto 값을 사용하면 콘텐츠의 크기에 따라 그리드 트랙을 늘리거나 줄일 수 있습니다.

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

이 예에서 첫 번째 행의 최소 높이는 100px이지만 최대값은 auto이므로 행 높이가 다음보다 커질 수 있습니다. 100px. 첫 번째 열은 최소값을 auto로 설정하지만 최대값은 50%입니다. 즉, 열의 최대 너비는 그리드 컨테이너 너비의 50%를 초과하지 않습니다

【repeat()】

반복( )을 사용하면 반복되는 그리드 트랙을 만들 수 있습니다. 이는 동일한 크기의 그리드 항목과 여러 그리드 항목을 만드는 데 적합합니다. peat()는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 그리드 트랙이 반복되어야 하는 횟수를 정의하고, 두 번째 매개변수는 각 트랙의 크기를 정의합니다.

rreee

　　在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）

 

间距

【grid-column-gap】 

　　创建列与列之间的间距

【grid-row-gap】

　　创建行与行之间的间距

【grid-gap】

　　默认值为0

　　grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同

　　[注意]grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距

　　间距(Gap)可以设置任何非负值，长度值可以是px、%、em等单位值

 

网格项目

网格线

【grid-row-start】

【grid-row-end】

【grid-column-start】

【grid-column-end】

　　默认值为auto

　　通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;　

　　两列三行的网格创建三条列网格线和四条行网格线。item1就是由行和列的号码重新定位。如果一个网格项目跨度只有一行或一列，那么grid-row-end和grid-olumn-end不是必需的

【grid-row】

【grid-column】

grid-row: 2; 
grid-column: 3 / 4;

　　grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开

　　默认值为auto

【span】

　　关键词span后面紧随数字，表示合并多少个列或行

grid-row: 1 / span 3;
grid-column: span 2;

【grid-area】

grid-area: 2 / 2 / 3 / 3;

　　如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

 

网格线命名

　　通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置

　　分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值。定义网格线名称时需要避免使用规范中出现的关键词，以免导致混乱。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

　　可以在方括号中添加多个名称来命名网格线名称，使用多外名称命名网格线名称时，名称间要用空格隔开。每一个网格线的名称可以用来定位网格项目的位置

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; 
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

　　使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似，引用网格线名称的时候不应该带方括号

　　使用repeat()函数可以给网格线分配相同的名称。这可以节省一定的时间。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

　　使用repeat()函数可以给网格线命名，这也导致多个网格线具有相同的网格线名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符

　　使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开 

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

 

网格区域命名

【grid-template-areas】

　　像网格线名称一样，网格区域的名称可以使用grid-template-areas属性来命名。引用网格区域名称也可以设置网格项目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

　　设置网格区域的名称应该放置在单引号或双引号内，每个名称由一个空格符分开。网格区域的名称，每组（单引号或双引号内的网格区域名称）定义了网格的一行，每个网格区域名称定义网格的一列

　　[注意]grid-template-areas: "header header" "content sidebar" "footer footer";不可以简写为grid-template-areas: "header" "content sidebar" "footer";

　　grid-row-start、grid-row-end、grid-column-start和grid-column-end以及简写的grid-row、grid-column、grid-area都可以引用网格区域名称，用来设置网格项目位置

 

隐式网格

【grid-auto-flow】

　　网格默认流方向是row，可以通过grid-auto-flow属性把网格流的方向改变成column　　 

grid-auto-flow: column

　　当网格项目确认在显式网格之外时就会创建隐性网格，当没有足够的空间或者显式的网格轨道来设置网格项目，此时网格项目就会自动创建隐式网格

【grid-auto-rows】

【grid-auto-columns】

　　使用grid-auto-rows和grid-auto-columns属性可以定义隐式的网格

　　默认值为auto

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

　　在上面这个例子中我们只定义了一行（轨道），所以item1和item2的高都是70px。第二行（轨道）自动创建了item3和item4空间。grid-auto-rows定义隐式网格中的行（轨道）的大小，因此item3和item4的高度是140px

 

隐式命名

【隐式命名网格区域名称】

　　通常可以将网格线命名成任何想命名的名称，如果网格线名称添加-start和-end的后缀，其实也隐式的创建一个网格区域，可以用来设置网格项目的位置

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

　　在这个示例中，行和列都具有inner-start和inner-end网格线名称，同时也对应的创建一个隐式网格区域名称inner

grid-area: inner

　　网格项目定位可以通过网格区域名称来设置，而不需要使用网格线名称

【隐式命名网格线名称】

　　隐式的指定网格线反向指定了隐式的网格区域名称，命名的网格区域隐式的命名了网格线名称 

grid-template-areas:   "header header" "content sidebar" "footer footer";
grid-template-rows:    80px 1fr 40px;
grid-template-columns: 1fr 200px;

　　指定网格区域会给网格区域边线添加隐式的网格线名称。这些网格线的命名是基于网格区域来命名，只是在网格区域名称的后面添加后缀-start或-end

grid-row-start: header-start; 
grid-row-end: content-start; 
grid-column-start: footer-start; 
grid-column-end: sidebar-end;

　　在这个示例中，header通过隐式的网格线名称设置其位置

 

网格项目层级

　　网格项目可以具有层级和堆栈，必要时可能通过z-index属性来指定 

.item-1,.item-2 {grid-row-start:  1;grid-column-end: span 2;
}.item-1 { 
    grid-column-start: 1; 
    z-index: 1; 
}.item-2 { 
    grid-column-start: 2 
}

　　在这个例子中，item1和item2的开始行都是1，item1列的开始是1，item2列的开始是2，并且它们都跨越两列。两个网格项目都是由网格线数字定位，结果这两个网格项目重叠了。

　　默认情况下，item2在item1上面，但是，我们在item1中设置了z-index:1;，导致item1在item2之上

 

对齐

【网格项目对齐方式（Box Alignment）】

　　CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。

【justify-items】

【justify-self】

　　justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

【网格轨道对齐方式】

　　网格轨道对齐可以相对于网格容器行和列轴。

　　align-content指定网格轨道沿着行轴对齐方式；justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性：

normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline

위 내용은 그리드 레이아웃 방법의 상세 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!