grid

時間 2019-11-19

標籤 grid 简体版

原文原文鏈接

<<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>gridlay</title>

<link rel="stylesheet" href="gid.css">

</head>

<body>

<div class="wrapper">

<div class="one">One</div>

<div class="two">Two</div>

<div class="three">Three</div>

<div class="four">Four</div>

<div class="five">Five</div>

<div class="six">Six</div>

</div>

</body>

</html>

.wrapper {/*wrapper對在全部在這個區間的單位起做用*/

display: grid;

grid-template-columns: repeat(3, 1fr);/*表示區間內列表重複的片斷容許大量表現出以更緊湊的形式被寫入的重複圖案的列或行的。*/

grid-gap: 10px;/*方塊之間的間距*/

grid-auto-rows: minmax(100px, auto);/*定義方塊大小*/

}

.one {/*定義該表格的屬性*/

grid-column: 1 / 3;/*表示佔用1/3個屏幕百分比*/

grid-row: 1;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: blue;/*背景色*/

}

.two { /*定義該表格的屬性*/

grid-column: 2 / 4;/*表示的隱含建立的網格列的大小軌道*/

grid-row: 1 / 3;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: blueviolet;/*背景色*/

}

.three {/*定義該表格的屬性*/

grid-column: 1;/*表示的隱含建立的網格列的大小軌道*/

grid-row: 2 / 5;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: rgb(0, 255, 149);/*背景色*/

}

.four {/*定義該表格的屬性*/

grid-column: 3;/*表示的隱含建立的網格列的大小軌道*/

grid-row: 3;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: rgb(55, 0, 255);/*背景色*/

}

.five {/*定義該表格的屬性*/

grid-column: 2;/*表示的隱含建立的網格列的大小軌道*/

grid-row: 4;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: rgba(0, 0, 255, 0.171);/*背景色*/

}

.six {/*定義該表格的屬性*/

grid-column: 3;/*表示的隱含建立的網格列的大小軌道*/

grid-row: 4;/*表示指定的隱含建立的網格行的軌道的大小*/

background-color: rgb(30, 255, 0);/*背景色*/

}

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<