grid布局

最新推荐文章于 2024-04-22 17:46:42 发布

黑皮蛋88

最新推荐文章于 2024-04-22 17:46:42 发布

阅读量89

点赞数

文章标签： html css 前端

原文链接：https://b23.tv/irR0UvK

版权

<!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-container {
      display: grid;
      /* 设置列宽度 */
      grid-template-columns: 200px 300px 200px;
      /* 设置列百分比 */
      grid-template-columns: 20% 60% 20%;
      /* 设置列比例 */
      grid-template-columns: 1fr 1fr 1fr;
      /* 比例简写 */
      grid-template-columns: repeat(3, 1fr);
      /* 自适应 */
      grid-template-columns: repeat(auto-fill, 200px);
      /* 某一列自适应 */
      grid-template-columns: 300px auto 200px;
      height: 600px;
      /* 行1 ：2的比例 即 第一行和第二行的高度比 = 200px : 400px */
      grid-template-rows: 1fr 2fr;
    }
    .grid {
      /* 为了使grid-template-rows生效 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
    <div class="grid">现如今，人们越来越依赖手机、电脑等数字设备获取信息。这些设备的普及和互联网的快速发展，使得我们可以在任何时间任何地点轻松地获取所需信息，这极大地方便了我们的生活和工作。然而，过度依赖数字设备也可能导致沉迷于虚拟世界、缺乏面对面交流等问题，需要注意平衡使用和控制使用时间。</div>
  </div>  
</body>
</html>