WEB前端教程：网格布局

学习 grid 网格布局的概念学习 CSS 网格中单位格基于线的定位方法

课程目标

学习 grid 网格布局的概念
学习 CSS 网格中单位格基于线的定位方法
如何精确地把项目摆放到网格中
了解 gird 与 flexbox 的区别与联系
学习学习自动定位概念,如何用网格自动创建很多列来填满整个容器
更加熟练掌握媒体查询

阅读学习

CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版

编码一

根据我们给出的 HTML 模板，应用网格布局定义列表，让 dt 显示在一边，dd 显示在另一边，呈两列布局

<dl>
  <dt>恐龙类</dt>
  <dd>尹氏芦沟龙</dd>
  <dd>破碎中国虚骨龙</dd>
  <dd>原始川东虚骨龙</dd>
  <dt>鲨鱼类</dt>
  <dd>六鳃鲨目</dd>
  <dd>鼠鲨目</dd>
  <dt>鸟类</dt>
  <dd>雁形目</dd>
  <dd>雨燕目</dd>
  <dd>夜鹰目</dd>
</dl>

效果图如下

编码二

应用网格布局，在 3x3 的网格结构基础上形成如示例图所示的垂直居中效果

编码三

应用网格布局，在 3x12 网格结构的基础上实现如示例图所示布局

每一列宽 140像素,网格间隙为20像素
在定义单元格行和列开始和结束位置尝试用不同的方法来定义

编码四

应用网格布局，实现一个响应式页面布局

应用grid-area给网格区域实现特定命名。
应用媒体查询实现响应式布局,浏览器窗口宽度小于 500 像素,单列布局
浏览器窗口宽度大于 500 像素,小于 600 像素时,页面呈现双列布局,siadebar1 位于左侧，content 位于右侧
浏览器窗口宽度大于 600 像素时，三列布局,页面呈现三列布局，siadebar1 位于左侧，content 位于中间，sidebar3 位于右侧

自测问题

说说你理解的网格布局是什么？
fr这个单位有什么作用？ grid-template-columns: repeat(3, 1fr)这一句实现了什么效果？
grid-column: 1 / 2和 grid-column: 1实现的效果一样吗？
说说grid-area属性值表示的顺序是什么?"
grid-gap: 1em 20px是什么意思？
用其他语法写出和grid-row: 1 / span 3一样的效果。
思考 flex 和 gird 分别适合什么引用场景

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-17 11:27
阅读 ( 331 )
分类：WEB前端开发

WEB前端教程：网格布局

课程目标

阅读学习

编码一

编码二

编码三

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »