当前位置：网站首页>Grid layout
Grid layout
2022-07-24 06:30:00 【PS notes】
grid Layout overview ：
flex The layout is a pile of layouts ,grid It's a two-dimensional layout
flex Consider the layout of items in rows or columns ,grid The layout needs to consider both rows and columns
Set up grid Containers ：
.container{
Display:grid;
Grid-template-columns:100px 100px 100px;
Grid-template-rows:100px 100px 100px }
.container{
Display:grid;
Grid-template-columns:100px 1fr 2fr;
Grid-template-rows:100px 100px 100px }
<style>
.container {
display: grid;
width: 800px;
height: 500px;
border: 1px solid blue;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
.item{
border: 1px solid red ;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</body>
</html>
<style>
.container {
display: grid;
width: 800px;
height: 500px;
border: 1px solid blue;
/* grid-template-columns:100px 100px 100px; */
/* grid-template-rows:100px 100px 100px; */
grid-template-columns:100px 1fr 2fr;
grid-template-rows:100px 100px 100px;
}
.item{
border: 1px solid red ;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</body>
</html>
grid-auto-flow:column; Elements are arranged vertically
.container{
display:grid;
grid-auto-flow:column;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px }
Container attribute ：
gird Alignment of items in cells ：
justify-items attribute Horizontal alignment
align-items attribute Vertical alignment
The cell is in the whole gird The way to it in the container
justify-content attribute
align-content attribute
<style>
.container {
display: grid;
width: 800px;
height: 500px;
border: 1px solid blue;
grid-template-columns:100px 100px 100px;
justify-content: center;
align-content: center;
}
.item{
border: 1px solid red ;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</body>
</html>
grid-auto-columns attribute Set the size of the overflow line
grid-auto-rows attribute Set the size of the overflow column
<style>
.container {
display: grid;
width: 800px;
height: 500px;
border: 1px solid blue;
grid-auto-flow: column;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
/* Size of overflow */
grid-auto-rows: 50px;
/* The size of the overflow column */
grid-auto-columns: 50px;
}
.item{
border: 1px solid red ;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">9</div>
<div class="item">9</div>
</body>
</html>
style>
.container{
display:grid;
width: 800px;
height: 500px;
border:1px solid blue;
/* grid-auto-flow: column; */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item{
border:1px solid red ;
}
.first{
/* grid-column-start: 1;
grid-column-end: 3; */
/* It can be abbreviated as follows */
grid-column: 1/3;
grid-row: 1/3;
}
</style>
</head>
<body>
<div class="container">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
</html>
<style>
.container{
display:grid;
width: 800px;
height: 500px;
border:1px solid blue;
/* grid-auto-flow: column; */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item{
border:1px solid red ;
}
.first{
/* grid-column-start: 1;
grid-column-end: 3; */
/* It can be abbreviated as follows */
grid-column: 2 / 4;
grid-row: 2 / 4;
justify-self: center;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
</html> 
Make a layout case as follows ;
<style>
*{
margin: 0px;
padding:0px;
}
.container {
display: grid;
width: 800px;
margin: 0 auto;
border: 1px solid blue;
grid-template-columns: 600px 200px;
grid-template-rows: 80px 200px 200px 200px 50px;
}
.item{
border:1px solid red;
}
.header{
grid-column: 1 / 3;
}
.aside{
grid-row: 2 / 5;
grid-column: 2 / 3;
}
.footer{
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item header">header</div>
<div class="item docs">docs</div>
<div class="item blogs">blogs</div>
<div class="item videos">videos</div>
<div class="item aside">aside</div>
<div class="item footer">footer</div>
</div>
</body>
</html> 
边栏推荐
猜你喜欢
随机推荐
go语言常用命令和包管理
Flink restart policy
leetcode 不用加减乘除算加法 || 二进制中1的个数
Flink function (2): checkpointedfunction
Li Kou 986. Intersection of interval lists
【226】wireshark的参数使用说明
IP class notes (4)
Do not rent servers, build your own personal business website (2)
Unity (III) three dimensional mathematics and coordinate system
awk的使用
LuckyFrameWeb测试平台（一款支持接口自动化、WEB UI自动化、APP自动化，并且支持分布式测试的全纬度免费开源测试平台）
手动安装Apache
三分钟记住20道性能测试经典面试题
Public access intranet IIS website server [no public IP required]
JSP tag
进行挂载永久挂载后无法开机
Do not rent a server, build your own personal business website (how to buy a domain name)
sed命令
General paging 01
Custom MVC 2.0