CSS布局与网格

CSS布局比较：Grid、Flexbox与Bootstrap实战解析

最新推荐文章于 2025-07-25 20:34:33 发布

原创最新推荐文章于 2025-07-25 20:34:33 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

CSS Grid vs Flexbox vs Bootstrap

在这里插入图片描述
bootstrap在flexbox和grid之前。

CSS Grid

设置网格display，和网格个数与宽度间距

在这里插入图片描述

但是直接设置px的话不能适应不同的窗口大小。所以调整成百分比更合适

或者可以以fr为单位设置

同时也可以设置行宽，如果不设置的话默认为1fr。

把每一列都写出来实际太麻烦了，可以用repeat
在这里插入图片描述

这样是根据窗口的大小任意变换列数。

在这里插入图片描述
当小于200px 就只有一列

auto的作用是自动为内容缩小或者扩张
加了auto是这样的
在这里插入图片描述

如果不加的话，宽度不会适应变化
在这里插入图片描述

内容的对齐

在这里插入图片描述

单个网格的调节

在这里插入图片描述

单个网格的内容对齐

和整个内容的对齐类似
在这里插入图片描述

CSS搭建网页布局练习

在这里插入图片描述

Nav

首先把navigation的内容加在header里面。最后的Contact在右边所以单独加一个class
在这里插入图片描述

在这里插入图片描述
对列表进行样式设置。
主要的有，将nav设为弹性盒子。除去列表点，设置字体大小，并把边界设为0。
然后实际出来字都是挨在一起的，所以给他们设一个padding
最后去除a标签中下划线

成了这个样子
在这里插入图片描述
可以看见几个内容之间还有一些空白，并且是在一行之中的。
在zone里去除padding和margin,以及取消inline-block

因为nav是弹性盒子，其他的也相应对齐，但是边界还有空白

检查出来是body里面还有margin

然后要调整Contact的位置
在这里插入图片描述

新的问题是窗口缩小，文字会溢出
此刻将使用media query
设置当宽度小于600px时 nav需要作出以下修改

Cover

cover 这一块设置一下新class container。并且也设为弹性盒子。因为cover内容居中所以，align-items 和justify-content都设置一下
cover的行高可以用viewport height,这样是占视图的比例
在这里插入图片描述

在这里插入图片描述

Project Grid + Footer

Project grid设置grid-wrapper的网格，用自动填充，当小于350px时，仅显示一个1fr。
网格之间间距为20px
在这里插入图片描述

在这里插入图片描述
box下面图片设置为百分百填满内容

每个box背景有一定margin，而图片也不是填满整个背景，所以有padding

footer本身就在最下面，主要是让其文字居中

美化整个网页

素材网站：https://undraw.co/illustrations

首先给cover添加一副图片，图片分类为cover
在这里插入图片描述
然后css之中
调整图片和cover区域的大小

第二，滚动的时候我们希望nav固定
加一个sticky分类

把位置固定置顶宽度100%

第三给project grid中做一些动画效果

相当于鼠标移上去，每个盒子都会有倾斜效果