在日常小程序开发中,第一个遇到的问题是页面布局的问题。设计师给的设计稿通常是一个静态的图片,我们要把图片转换成实际可以使用的布局。在电商场景中,我们经常会看到商品的两列布局,通常在CSS中,两列布局可以使用网格布局的方案解决。我们本篇就讲解一下CSS的网格布局,并结合一个布局的小案例来讲解一下网格布局在实际场景中的应用。
网格布局
要想学习一个知识点,我们通常在MDN中查询会比较权威,百度输入关键词
网格布局 MDN
学习一共有两个关键点,第一个是知道,第二个是会用。知道考察的是你知识涉猎的范围,会用考察的是实际动手的能力。
在日常的交流过程中,初入门的往往喜欢一遇到问题就问。问当然比较便捷,但是一有问题就问,往往缺乏独立思考和解决问题的能力。这个形成一种依赖之后,便成了伸手党,如果日后你做了开发岗,你问的问题不见得同事会,同事会因为竞争的关系不见得愿意告诉你。
说了一些题外话,我们回归到正题,还是先看看这个知识点是什么意思
网格是一组相交的水平线和垂直线,它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上文章来源:https://www.toymoban.com/news/detail-497850.html
看定义其实就是把界面差分为行和列,我们正是需要这种布局,我们来实操一下。先给页面设置一个灰色的背景色
文章来源地址https://www.toymoban.com/news/detail-497850.html
到了这里,关于小程序中的网格布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!