CSS Grid網格佈局淺嘗

時間  2019-11-06
標籤 css grid 網格 佈局 淺嘗 欄目 CSS 简体版
原文   原文鏈接

技術源於生活，服務生活css

地址：api.imibi.cn:8080html

簡單的Gridapi

.container-r-btm {
      display: grid;
      /* grid-template-columns: repeat(auto-fill, 160px);
      grid-template-rows: repeat(auto-fill, 160px); */
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(auto-fill, 160px);
      grid-gap: 10px;
      /* gir */
      min-height: 200px;
      background-color: rgba(240, 240, 240, 0.3);
      padding: 20px;
    }
複製代碼

CSS樣式效果flex

index.htmlui

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style> * { margin: 0; padding: 0; } .main { width: 94vw; min-height: 100vh; margin: 0 auto; background-color: snow; } .main-title { height: 60px; line-height: 60px; font-weight: normal; } .container { width: 100%; height: 100%; border: 1px solid #e5e5e5; display: flex; } .container-l { width: 300px; min-height: 200px; padding-left: 20px; padding-top: 20px; background-color: #fff; } .container-l .container-l-title { display: flex; align-items: center; margin-bottom: 12px; } .container-l .container-l-title img { width: 40px; height: 40px; margin-right: 10px; } .container-l .container-l-title p { font-size: 36px; color: blue; font-weight: bold; } .l-items { padding: 10px; } .container-r { padding-top: 20px; background-color: #fff; min-height: 200px; flex: 1; } .container-r-btm { display: grid; /* grid-template-columns: repeat(auto-fill, 160px); grid-template-rows: repeat(auto-fill, 160px); */ grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(auto-fill, 160px); grid-gap: 10px; /* gir */ min-height: 200px; background-color: rgba(240, 240, 240, 0.3); padding: 20px; } .box-items { /* width: 140px; height: 140px; */ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .box-items img { width: 40px; height: 40px; } .box-items p { margin-bottom: 12px; } </style>
</head>

<body>
  <div class="main">
    <h2 class="main-title">實時數據</h2>

    <div class="container">
      <div class="container-l">
        <div class="container-l-title">
          <img src="./src/img/haha.png" alt="">
          <p>RANK</p>
        </div>
        <p class="l-items">實時數據</p>
        <p class="l-items">實時數據</p>
      </div>

      <div class="container-r">
        <div class="container-r-top">
          <p>實時數據</p>
        </div>

        <div class="container-r-btm">
          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>

          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>

          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>

          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>

          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>

          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>


          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>


          <div class="box-items">
            <p>30</p>
            <p>溫度C</p>
            <img src="./src/img/haha.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程