在本文中,我们将引见在页面宽度和显现宽度是相应的情况下,依据显现的宽度来示意网格单元格的宽度的代码。
我们起首要知道的是,假如要建立一个相应网格单元,能够运用fr单元。
我们来看细致的实例
代码以下:
SimpleGridPxFr.css
.Container { display: grid; grid-template-columns: 160px 160px 160px 1fr; 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; }
SimpleGridPxFr.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="SimpleGridPxFr.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>
申明:
Container类的代码以下。网格的规划是4列2行。从第1列到第三列的网格是160像素的牢固宽度的单元格。第4列的最右侧的单元格是被指定为1 fr,因而它变成盈余显现宽度的宽度。
.Container { display: grid; grid-template-columns: 160px 160px 160px 1fr; grid-template-rows: 120px 120px; border:solid #ff6a00 1px; }
运转结果
运用Web浏览器显现上述HTML文件。显现以下所示的结果。显现网格左边的三列,宽度为160像素,第四个单元格显现页面宽度的盈余宽度。
减少Web浏览器的窗口宽度。左边的三列牢固为160像素的宽度。最右侧的第四列单元格的宽度依据窗口宽度压缩。
第四列中的单元格的宽度依据窗口宽度变窄,但不小于最小宽度。假如从最小宽度减小窗口宽度,将显现程度滚动条。
当有多个fr的单元格时的示例
代码以下
编写以下HTML和CSS代码。
SimpleGridPxEmFr.css
.Container { display: grid; grid-template-columns: 160px 2fr 16em 1fr; 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; }
SimpleGridPxEmFr.html
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="SimpleGridPxEmFr.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>
网格规划框架的单元格宽度设置为160像素,2 fr,16 em,1 fr。因为160个像素和16个em是牢固宽度,所以第一和第三列成为牢固单元,第二和第四列单元格变成相应。2fr和1fr的宽度为2:1。
.Container { display: grid; grid-template-columns: 160px 2fr 16em 1fr; grid-template-rows: 120px 120px; border:solid #ff6a00 1px; }
运转结果
运用Web浏览器显现上述HTML文件。显现以下所示的结果。
假如减少窗口宽度,则fr指定的单元格将变窄。
关于1fr和2fr的单元,宽度以宽度变成1:2的比率压缩。
以上就是网格规划中建立相应显现地区宽度的网格(px和fr的夹杂网格)的细致内容,更多请关注ki4网别的相干文章!