Div 的边框 - 媒体查询中的 GRID

问题描述 投票：0回答：1

我有 2 个关于 GRID 中的边界的问题。

  1. 除了我在桌面显示器上查看页面时使用的方法之外，还有更好的方法吗？
  2. 如何在手机上查看时没有间隙且有2px边框？ 请参阅 9 div 网格。当在媒体查询中使用 2px 时，它显示得很厚。

查看 .div1、.div2 等显示边框代码的 css。 我不想在媒体查询中使用。

Div 的边框 - GRID https://codepen.io/davidhelp/pen/NWJoJaE?editors=1100

查看桌面视图和媒体查询的 CSS 代码。您可以移动 codepen 上的滑块来查看媒体查询视图。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <!--need this or some characters will display random gibberish -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- keeps text the size you want in cell phone screens. Without it the text will be very small. -->
  <title>Borders for Divs - GRID</title>

  <style>
   * {
    box-sizing: border-box;
   }

   body {
    margin-top: 30px;
    padding: 0px;
    background-color: #2f97ff; /* background color */
   }

   .container {
    display: grid;
    width: 70%;
    grid-template-areas:
     "div1 div2 div3"
     "div4 div5 div6"
     "div7 div8 div9";
    grid-template-columns: 1fr 1fr 1fr; /* .75 or .5 etc. only or combo, if px used for all then the container does not wrap around tightly */
    grid-template-rows: 150px 150px 150px;
    margin: 0px auto;
    margin-top: 30px;
    background: #148aff;
    gap: 0px;
    padding: 50px;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid black;
   }

   .container > div {
    place-items: center;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
   }

   .div1 {
    grid-area: div1;
    display: grid;
    background: #84d7ba;
    border-top: 2px solid black;
    border-left: 2px solid black;
   }

   .div2 {
    grid-area: div2;
    display: grid;
    background: #50a7ff;
    border-top: 2px solid black;
   }

   .div3 {
    grid-area: div3;
    display: grid;
    background: #00c7a6;
    border-top: 2px solid black;
   }

   .div4 {
    grid-area: div4;
    display: grid;
    background: #fffee1;
    border-left: 2px solid black;
   }

   .div5 {
    grid-area: div5;
    display: grid;
    background: #148aff;
   }

   .div6 {
    grid-area: div6;
    display: grid;
    background: #ff8b61;
   }

   .div7 {
    grid-area: div7;
    display: grid;
    background: #5c5cdb;
    border-left: 2px solid black;
   }

   .div8 {
    grid-area: div8;
    display: grid;
    background: #d63f15;
   }

   .div9 {
    grid-area: div9;
    display: grid;
    background: #ae3fd6;
   }

   p {
    font-family: verdana, Helvetica, arial, sans-serif;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.4em;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
   }

   h2 {
    font-family: "Bookman Old Style", serif;
    text-align: center;
    color: #000000;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
   }

   a:link {
    color: #000000;
    text-decoration: underline;
   } /* black */
   a:active {
    color: #ff0000;
    text-decoration: underline;
   } /* red */
   a:visited {
    color: #000000;
    text-decoration: underline;
   } /* blue */
   a:hover {
    color: #ff8040;
    font-size: 110%;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 0.02px red;
    background-color: #ffffff;
   }
   /* red bold shadow shift fix, white on mouse hover*/

   @media all and (max-width: 650px) {
    .container {
     grid-template-areas:
      "div1"
      "div2"
      "div3"
      "div4"
      "div5"
      "div6"
      "div7"
      "div8"
      "div9";
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     width: 98%;
     height: 100vh;
     overflow-wrap: break-word;
     word-wrap: break-word;
     gap: 5px;
     padding: 0px;
     margin: 0px auto;
     background-color: #148aff;
    }

    .container > div {
     border: 2px solid #000000;
    }
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="div1"><p>div1</p></div>
   <div class="div2"><p>div2</p></div>
   <div class="div3"><p>div3</p></div>
   <div class="div4"><p>div4</p></div>
   <div class="div5"><p>div5</p></div>
   <div class="div6"><p>div6</p></div>
   <div class="div7"><p>div7</p></div>
   <div class="div8"><p>div8</p></div>
   <div class="div9"><p>div9</p></div>
  </div>
 </body>
</html>
html for-loop grid border s
1个回答
0
投票

* {
  box-sizing: border-box;
}

body {
  margin-top: 30px;
  padding: 0px;
  background-color: #2f97ff;  /* background color */
}

.container {
  width: 70vw;
  background: #148AFF;
  display: grid;
  margin: 0px auto;
  margin-top: 30px;
  padding: 50px;
  border: 2px solid black;
  border-radius: 10px;
}

.flex-group{
  display:flex;
  justifu-content:center;
  align-items:center;
}

.div{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:30vh;
}

.div1 {
  background: #84d7ba;
  border-top: 2px solid black;
  border-left: 2px solid black;
}

.div2 {
  background: #50A7FF;
  border-top: 2px solid black;
}

.div3 {
  background: #00C7A6;
  border-top: 2px solid black;
}

.div4 {
  background: #FFFEE1;
  border-left: 2px solid black;
}

.div5 {
  background: #148AFF;
}

.div6 {
  background: #FF8B61;
}

.div7 {
  background: #5C5CDB;
  border-left: 2px solid black;
}

.div8 {
  background: #D63F15;
}

.div9 {
  background: #AE3FD6;
}

p {
  font-family: verdana, Helvetica, arial, sans-serif;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.4em;
  padding:0;
  margin:0;
}

h2 {
  font-family: 'Bookman Old Style', serif;
  text-align: center;
  color: #000000;
  padding:0;
  margin:0;
}


a:link {color: #000000; text-decoration: underline; }  /* black */
a:active {color: #ff0000; text-decoration: underline; }  /* red */
a:visited {color: #000000; text-decoration: underline; }  /* blue */
a:hover { color: #ff8040; font-size:110%; font-weight: bold; text-decoration: none; text-shadow: 0 0 0.02px red; background-color: #ffffff; }
/* red bold shadow shift fix, white on mouse hover*/

@media all and (max-width: 650px) {
  .container {
    width: 90%;
    height: auto;
    padding: 10px;
    margin: 0px auto;
    background-color: green;
  }
  .flex-group{
    display:block;
  }
  .container > div {
    min-height:auto;
    border: 2px solid #000000;
  }
}
<div class="container">
  <div class="flex-group">
    <div class="div div1"><p>div1</p></div>
    <div class="div div2"><p>div2</p></div>
    <div class="div div3"><p>div3</p></div>
  </div>
  <div class="flex-group">
    <div class="div div1"><p>div4</p></div>
    <div class="div div2"><p>div5</p></div>
    <div class="div div3"><p>div6</p></div>
  </div>
  <div class="flex-group">
    <div class="div div1"><p>div7</p></div>
    <div class="div div2"><p>div8</p></div>
    <div class="div div3"><p>div9</p></div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.