首页 > 其他分享 >CSS-Grid网格布局学习心得

CSS-Grid网格布局学习心得

时间:2024-05-10 14:48:07浏览次数:10  
标签:dense 非负 auto 学习心得 content 可选值 Grid CSS

CSS-grid属性:

value(可选值):

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'> / <'grid-template-columns'>

1、<'grid-template'>(可选值)

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

2、<'grid-template-columns'>,<'grid-template-rows'>(可选值):

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

3、<'grid-auto-columns'>,<'grid-auto-rows'>(可选值):

<track-size>+

4、<'track-size'>(可选值):

<'length-percentage [0,∞]'>(非负长度或百分比),<'flex [0,∞]'>(一个非负尺寸,单位为fr),minmax(),'max-content','min-content','auto'等

标签:dense,非负,auto,学习心得,content,可选值,Grid,CSS
From: https://www.cnblogs.com/zhuifeng-/p/18183993

相关文章

  • 网页根据屏幕宽度请求不同的CSS文件
    网页根据屏幕宽度请求不同的CSS文件前言:重在记录,可能出错。一、代码<!DOCTYPEhtml><htmllang="ch"> <head> <title>网页根据屏幕宽度请求不同的CSS文件</title> <linkid="desktop-style"media="onlyscreenand(min-width:960px)"type=&......
  • Selenium4自动化测试3--元素定位By.NAME,By.LINK_TEXT 和通过链接部分文本定位,By.PARTI
    4-通过名称定位,By.NAMEname属性为表单中客户端提交数据的标识,一个网页中name值可能不是唯一的。所以要根据实际情况进行判断 importtimefromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy#指定浏览器的位置,解决浏览器驱动和浏览器版本不匹配......
  • css border-radius 如何设置不占div宽度,向外突出
    在CSS中,border-radius用于创建元素的圆角边框,但边框圆角本身是包含在元素的总宽度和高度内的,并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”,即不占用div本身的宽度和高度,可以通过一些技巧来模拟这种效果。一种常见的方法是使用伪元素(::before和::afte......
  • CSS第二趴
    一吐槽学完基础教程,看网页被教育了,继续学吧继续学习元素的属性 二中级教程1.display属性,规定如何是否/如何显示元素,元素默认有自己的display属性,但可以改变如何显示 display:nonedisplay:blockdisplay:inline 1.1块级元素(blockelement)从新行开始,占据一行,并......
  • CSS JS 自适应菜单
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ResponsiveMenu</t......
  • css正在加载中的效果
    <divclass="loading"><pclass="loader"></p><p>正在加载中</p></div>.loading{position:absolute;width:100%;text-align:center;top:45%;color:#3498db;}.loader{......
  • 问文心一言——C# 遍历datagridview单元格 不用嵌套循环
    问:C#遍历datagridview单元格不用嵌套循环答:在C#中遍历DataGridView的单元格通常意味着你需要遍历行(Rows)并在每行中遍历单元格(Cells)。然而,如果你想要避免嵌套循环的“感觉”,你可以使用LINQ(LanguageIntegratedQuery)或者一个简单的foreach循环配合委托或Lambda表达式来“扁平化......
  • https://github.com/long36708/long36708/blob/main/resources/img/grid-snake.svg 请
    对于这个文件,你可以将它放在你的GitHub仓库的"resources"目录下,通常也可以选择"assets"、"images"或者其他类似的名称。如果你还没有这样的目录,你可以按照以下步骤操作:在你的GitHub仓库中创建一个新的目录,可以命名为"resources"、"assets"、"images"或者其他你喜欢......
  • 讨论 :银弹真的有用么? 在学习通提交解答的同时,可以同步发布在团队和个人博客上,作为
    银弹在项目管理和团队协作中是一种特殊的工具,其有效性和适用性取决于具体的团队和项目环境。这里是关于银弹的一些讨论点和考虑因素:优点:快速决策:当团队成员之间出现争执时,银弹可以帮助快速做出决策,避免争论持续下去,节省时间和精力。明确权威:银弹赋予特定角色(Dev/Test/PM)决策权,......
  • vsCode配置自动补全css兼容性代码 ,解决 Autoprefixer 3.0无效
    问题:使用vsCode编辑器,配置Autoprefixer3.0无法实现自动补全兼容性代码解决方法:将Autoprefixer3.0更换到2.0版本,再将网上冲浪的结果整理了一番,终于找到了解决办法,并进行以下步骤进行验证。解决步骤:1、首先搭建node.js环境2、打开vsCode搜索Autoprofixer,一般默认情况下都是最新版......