CSS: display: grid布局

 

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .grid {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 20px;
      row-gap: 10px;
    }

    .grid>div {
      background-color: palegreen;
    }
  </style>
</head>

<body>
  <div class="grid">
    <div class="column1">column1</div>
    <div class="column2">column2</div>
    <div class="column3">column3</div>
    <div class="column4">column4</div>
    <div class="column5">column5</div>
    <div class="column6">column6</div>
  </div>
</body>

</html>
复制代码

 

posted @   ascertain  阅读(214)  评论(0)  编辑  收藏  举报
相关博文：
· CSS: Three Column Layout
· CSS: transform transition
· grid 布局 css
· grid网格布局方案
· css之grid布局基础
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示