CSS网格边框不响应

Question

下面的CSS在监视器上可以正常工作，但是在电话上查看网格时没有边界，尽管布局很好，但边界已经消失了。不确定问题是什么。

寻找项目列表的容器 - 我只是认为这是反对列表的最佳方法。

我已将边框盒放在@media

中

    /*-------------GRID------------*/
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
        border-radius: 25px;
        background-color: dfe1ee;
    }
    
    body {
      margin: 40px;
      background-color: #dfe1ee;
      color: #444;
    }
    
    img {
      max-width: 100%;
    }
    
    h1,
    p {
      margin: 0 0 1em 0;
    }
    
    .media {
      margin-bottom: 2em;
      border: 5px solid #dfe1ee;
      padding: 10px;
    }
    
    .media > .title { grid-area: title; }
    .media > .img { grid-area: img; }
    .media > .content { grid-area: bd; }
    .media > .footer { grid-area: ft; }
    
    .media {
      display: grid;
      grid-column-gap: 20px;
      grid-template-areas:
        "title"
        "img"
        "bd"
        "ft";
    }
    
    
    @media (min-width: 600px) {
    
      /* clearfix*/
      .media:after {
        content: "";
          border: 15px solid #dfe1ee;
        display: block;
        clear: both;
         border-radius: 25px;
        background-color: dfe1ee;
          box-sizing: border-box;
      }
    
      .media > .media {
        margin-left: 160px;
        clear: both;
          border: 5px solid #dfe1ee;
      }
    
      .media .img {
        float: left;
        margin: 0 10px 0 0;
        width: 150px;
      }
      
      .media .footer {
        background-color: #eee;
        padding: 10px;
      }
    
      .media.media-flip .img {
        float: right;
        margin: 0 0 0 10px;
      }
    
      .media > * {
        margin: 0 0 0 160px;
      }
    
      .media.media-flip > * {
        margin: 0 160px 0 0;
      }
    
      @supports(display: grid ) {
        /* override */
        .media > *,
        .media.media-flip > * {
          margin: 0;
        }
        .media .img,
        .media.media-flip .img {
          width: auto;
          margin: 0;
        }
        .media:after {
          content: none;
        }
    
        .media {
          display: grid;
          grid-column-gap: 20px;
          grid-template-columns: 150px 3fr;
          grid-template-rows: auto 1fr auto;
          grid-template-areas:
            "img title"
            "img bd"
            "ft ft";
        }
    
        .media.media-flip {
          grid-template-columns: 3fr 150px ;
          grid-template-areas:
            "title img"
            "bd img"
            "ft ft";
        }
    
        .media.img-flexie {
          grid-template-columns: minmax(150px, 1fr) 3fr;
        }
    
        .media.media-flip.img-flexie {
          grid-template-columns: 3fr minmax(150px, 1fr);
        }
    
        /* nested */
        .media > .media {
          grid-column: 2 / -1 ;
          margin: 0; /* override */
          margin-top: 1em;
        }
      }
    
    
    }
    
    /*-------------GRID------------*/

<div class='media'>
  <div class='img'>
    <img src='https://via.placeholder.com/100' width=100>
  </div>
  <div class='content'>
    <p align='right'> STUFF </p>
  </div>
  <div class='footer'> OTHER STUFF </div>
</div>

确实需要一个曲线来概述内容。

Answer 1

不确定您，但是我看到任何视口大小的边框？

/*-------------GRID------------*/
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    	border-radius: 25px;
    	background-color: dfe1ee;
    }
    
    body {
      margin: 40px;
      background-color: #dfe1ee;
      color: #444;
    }
    
    img {
      max-width: 100%;
    }
    
    h1,
    p {
      margin: 0 0 1em 0;
    }
    
    .media {
      margin-bottom: 2em;
      border: 5px solid red;
      padding: 10px;
    }
    
    .media > .title { grid-area: title; }
    .media > .img { grid-area: img; }
    .media > .content { grid-area: bd; }
    .media > .footer { grid-area: ft; }
    
    .media {
      display: grid;
      grid-column-gap: 20px;
      grid-template-areas:
        "title"
        "img"
        "bd"
        "ft";
    }
    
    
    @media (min-width: 600px) {
    
      /* clearfix*/
      .media:after {
        content: "";
    	  border: 15px solid #dfe1ee;
        display: block;
        clear: both;
    	  border-radius: 25px;
    	  background-color: dfe1ee;
    	  box-sizing: border-box;
      }
    
      .media > .media {
        margin-left: 160px;
        clear: both;
    	  border: 5px solid #dfe1ee;
      }
    
      .media .img {
        float: left;
        margin: 0 10px 0 0;
        width: 150px;
      }
      
      .media .footer {
        background-color: #eee;
        padding: 10px;
      }
    
      .media.media-flip .img {
        float: right;
        margin: 0 0 0 10px;
      }
    
      .media > * {
        margin: 0 0 0 160px;
      }
    
      .media.media-flip > * {
        margin: 0 160px 0 0;
      }
    
      @supports(display: grid ) {
        /* override */
        .media > *,
        .media.media-flip > * {
          margin: 0;
        }
        .media .img,
        .media.media-flip .img {
          width: auto;
          margin: 0;
        }
        .media:after {
          content: none;
        }
    
        .media {
          display: grid;
          grid-column-gap: 20px;
          grid-template-columns: 150px 3fr;
          grid-template-rows: auto 1fr auto;
          grid-template-areas:
            "img title"
            "img bd"
            "ft ft";
        }
    
        .media.media-flip {
          grid-template-columns: 3fr 150px ;
          grid-template-areas:
            "title img"
            "bd img"
            "ft ft";
        }
    
        .media.img-flexie {
          grid-template-columns: minmax(150px, 1fr) 3fr;
        }
    
        .media.media-flip.img-flexie {
          grid-template-columns: 3fr minmax(150px, 1fr);
        }
    
        /* nested */
        .media > .media {
          grid-column: 2 / -1 ;
          margin: 0; /* override */
          margin-top: 1em;
        }
      }
    
    
    }
    
    /*-------------GRID------------*/

<div class='media'>
  <div class='img'>
    <img src='https://via.placeholder.com/100' width=100>
  </div>
  <div class='content'>
    <p align='right'> STUFF </p>
  </div>
  <div class='footer'> OTHER STUFF </div>
</div>