可以通过minmax()函数来创建网格轨道的最小或最大尺寸。

minmax()函数接受两个参数:

第一个参数定义网格轨道的最小值

第二个参数定义网格轨道的最大值

可以接受任何长度值,也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。

在这个示例中,第一行的高度最小值是100px,但其最大值为auto,允许行高可以变大超过100px

第一列设置了最小值为auto,但它的最大值是50%,也就是列的最大宽度不会超过网格容器宽度的50%

<view class="grid">
<view class='grid-row'>1</view>
<view class='grid-row'>2</view>
<view class='grid-row'>3</view>
<view class='grid-row'>4</view>
</view>
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
grid-template-rows: minmax(100px, auto);
/* grid-template-columns: minmax(auto, 50%) 1fr 3em; */
} .grid-row {
text-align: center;
background-color: #d94a6a;
}

grid - 网格轨道最小和最大尺寸的更多相关文章

  1. grid - 网格轨道对齐方式

    网格轨道对齐可以相对于网格容器行和列轴. align-content指定网格轨道沿着行轴对齐方式:justify-content指定网格轨道沿着列轴对齐方式.它们支持下面属性: normal star ...

  2. grid - 重复网格轨道

    使用repeat()可以创建重复的网格轨道.这个适用于创建相等尺寸的网格项目和多个网格项目 <view class="grid"> <view class='gr ...

  3. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  4. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  5. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  6. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  7. 从 NavMesh 网格寻路回归到 Grid 网格寻路。

    上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. Android BottomSheet:List列表或Grid网格展示(3)

     Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...

随机推荐

  1. PyCharm更改字体和界面样式

    更改主题 File → Settings → Appearance & Behavior → Appearance → Theme 结果: 更改字体大小 File → Settings → E ...

  2. ERP完善合同起草(二十八)

    前端的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CRMCont ...

  3. CSS 3. 文本|字体|背景|定位

    1.文本属性和字体属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. Biquads

    From : http://www.earlevel.com/main/2003/02/28/biquads/     One of the most-used filter forms is the ...

  5. HDU 2594 (next数组的用法)【KMP】

    <题目链接> 题目大意: 给两个字符串,求第一串的前缀与第二串的后缀匹配的最长序列以及长度. 解题分析: 看到这个求前缀和后缀相同序列的最大长度,我们不难想到KMP中的next数组.做法就 ...

  6. QT学习之菜单栏与工具栏

    QT学习之菜单栏与工具栏 目录 简单菜单栏 多级菜单栏 上下菜单栏 工具栏 简单菜单栏 程序示例 from PyQt5.QtWidgets import QApplication, QMainWind ...

  7. python网络编程基础(线程与进程、并行与并发、同步与异步、阻塞与非阻塞、CPU密集型与IO密集型)

    python网络编程基础(线程与进程.并行与并发.同步与异步.阻塞与非阻塞.CPU密集型与IO密集型) 目录 线程与进程 并行与并发 同步与异步 阻塞与非阻塞 CPU密集型与IO密集型 线程与进程 进 ...

  8. 版本控制系统 git 之基础讲解

    很久之前就用起了git,但都是用在从github上clone项目上,或者hexo的博客提交上,直到前段时间加入了学校的技术中心,需要用git进行文件管理,才去了解了下git的具体使用方式. 什么是gi ...

  9. 工作->离职->考研

    1.工作篇 去年我大三,理论上来说我应该考研,也必须考研,我当时的想法也是这样.但是不知道什么情况,我竟然选择了工作,连我也没想到的反转,可能当时我对自己的技术很自信?我想可能是,有点对自己技术觉得还 ...

  10. 条件随机场之CRF++源码详解-预测

    这篇文章主要讲解CRF++实现预测的过程,预测的算法以及代码实现相对来说比较简单,所以这篇文章理解起来也会比上一篇条件随机场训练的内容要容易. 预测 上一篇条件随机场训练的源码详解中,有一个地方并没有 ...