zoukankan      html  css  js  c++  java
  • 关于 CSS 中 Grid响应式布局

    首先先上代码

    CSS

    .container
    {     display: grid;     grid-gap: 15px;     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));     grid-template-rows: repeat(2, 100px); } .container>div{ border:1px solid; display: flex; align-items: center; justify-content: center; }
    HTML

    <
    div class="container">     <div>1</div>     <div>2</div>     <div>3</div>     <div>4</div>     <div>5</div>     <div>6</div> </div>

    /* grid-template-columns:代表每一列的宽度,Grid 栅格布局带来了一个全新的值: fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。 */

    /* repeat()函数,这是一个强大的指定列和行的方法,第一个参数指定行与列的数量,第二个参数指定它们的宽度。 */

    /* auto-fit,让我们跳过固定数量的列,将指定数量根据指定宽度替换为自适应的数量 。*/
     
    /* 栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px,永远没法实现的弹性,因为它们很难填充整个宽度。网格通常在右侧留有空白。*/

    /* 为了解决上述问题,我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)。*/
     
     
     

    可以直接copy看看效果更直观

  • 相关阅读:
    [BZOJ2431] [HAOI2009]逆序对数列
    [Luogu2323] [HNOI2006]公路修建问题
    [Luogu2455] [SDOI2006]线性方程组
    [BZOJ3550] [Sdoi2014]数数
    [Noip2017] 列队
    [Luogu2824] [HEOI2016/TJOI2016]排序
    [BZOJ1060] [ZJOI2007]时态同步
    P1036 选数 题解
    快速幂取模算法详解
    同余定理及其应用
  • 原文地址:https://www.cnblogs.com/ryanchong/p/13390418.html
Copyright © 2011-2022 走看看