登峰造极境

  • WIN
    • CSharp
    • JAVA
    • OAM
    • DirectX
    • Emgucv
  • UNIX
    • FFmpeg
    • QT
    • Python
    • Opencv
    • Openwrt
    • Twisted
    • Design Patterns
    • Mysql
    • Mycat
    • MariaDB
    • Make
    • OAM
    • Supervisor
    • Nginx
    • KVM
    • Docker
    • OpenStack
  • WEB
    • ASP
    • Node.js
    • PHP
    • Directadmin
    • Openssl
    • Regex
  • APP
    • Android
  • AI
    • Algorithm
    • Deep Learning
    • Machine Learning
  • IOT
    • Device
    • MSP430
  • DIY
    • Algorithm
    • Design Patterns
    • MATH
    • X98 AIR 3G
    • Tucao
    • fun
  • LIFE
    • 美食
    • 关于我
  • LINKS
  • ME
Claves
长风破浪会有时,直挂云帆济沧海
  1. 首页
  2. Programming
  3. css3
  4. 正文

CSS3 Grid 网格模型

2022-08-31

想做一个大屏布局,但用flexbox没有很快速完美的实现。遂发现grid更易实现,遂学习。

中文教程:https://www.w3school.com.cn/css/css_grid.asp
入门视频:
https://www.bilibili.com/video/BV18p411A7JB
https://www.bilibili.com/video/BV1h34y167J3

10分钟就完成了布局,而且还挺好用。

  .body {
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    overflow-y: scroll;
    >div {
      border-style: dashed;
      color: white;
      background-color: #00101f;
      opacity: 0.5;
    }

    div:first-child {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 3;
    }
  }
}
标签: 暂无
最后更新:2022-08-31

代号山岳

知之为知之 不知为不知

点赞

COPYRIGHT © 2099 登峰造极境. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备14031139号-5

川公网安备51012202000587号