新手的grid布局

最新推荐文章于 2025-07-24 15:12:18 发布

weixin_30415113

最新推荐文章于 2025-07-24 15:12:18 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mumu597/p/9733014.html

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="布局grid.css">
<title>grid布局</title>
</head>
<body>
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</body>
</html>

css部分

1.Gutters

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 1em;
}

2.Positioning items against lines

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

本次我也只是拿了老师上课讲的里面中的2个，只进行了简单的grid的布局其中的一个小的布局方式，grid的布局远不止这些，在现在的主流布局方式有grid外还有felxbox等。

在日常网页布局中这2者不是相互排斥的，我们在日常的学习中要学会用好这2个布局，

grids 适用于大画面的布局。
Flexbox 来定位设计上一些较小的细节。
Flexbox 适用于单一维度的布局，轴。

下次课程老师将教我们felxbox布局。对grid布局感兴趣的同学，这有个传送门：http://devdocs.io/css/css_grid_layout/basic_concepts_of_grid_layout

也希望大家可以给我指点指点，谢谢大家。

转载于:https://www.cnblogs.com/mumu597/p/9733014.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。