Question

请有人能告诉我使该网格响应式的代码。我一直试图从众多的在线博客中找出答案，但我做不到。我必须使用媒体查询吗？

任何系统；无论如何，使用Display：Grid-制作响应式Grid真的很感激。

如果您向我展示一次，我将采用该方法。谢谢

这是我制作的网格。

https://codepen.io/mrlondon/project/live/DvxJvL/

代码如下：

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-image: url("wallpaper2.jpg");
  background-repeat: repeat;
}

.header {
  width: 100%;
  background: black;
  height: 100px;
  color: white;
}

.topdiv {
  background: pink;
  margin: 0 auto;
  width: 75%;
  height: 40px;
}

.wrapper {
  margin: 0 auto;
  width: 75%;
  background: pink;
  height: 2000px;
  display: grid;
  grid-template-columns: repeat( 4, 1fr);
  grid-template-rows: 350px 350px 350px 350px 350px;
  grid-gap: 10px;
  Padding: 30px;
}

.wrapper img {
  border: 2px solid #f0c330;
  max-width: 100%;
  border-radius: 10px;
}

h1 {
  margin: 0 auto;
  position: relative;
  top: 30px;
  left: 15px;
  font-size: 2em;
  color: #f0c330;
}

ul {
  list-style-type: none;
  float: right;
  margin: auto;
  position: relative;
}

li {
  display: inline-block;
  padding-left: 20px;
  font-size: 1.4em;
}

.lastlist {
  padding-right: 65px;
}

a {
  text-decoration: none;
  color: #f0c330;
}

a:hover {
  color: white;
}


}
.h2one {
  margin: 0;
  position: relative;
  left: 10px;
  top: 10px;
  color: #f0c330;
  text-decoration: underline;
}
.box1listone {
  background: black;
  postion: relative;
  top: 30px;
  float: left;
  padding: 0;
  Margin: 0;
  color: white;
  font-size: 0.9em;
}
.box1listone li {
  display: block;
}
.box1listtwo {
  background: black;
  postion: relative;
  top: 30px;
  right: 75px;
  float: right;
  padding: 0;
  Margin: 0;
  color: white;
  font-size: 0.9em;
}
.box1listtwo li {
  display: block;
}
.h2two {
  margin: 0;
  position: relative;
  left: 10px;
  top: 10px;
  color: #f0c330;
  text-decoration: underline;
}
.h2three {
  margin: 0;
  position: relative;
  left: 32px;
  top: 25px;
  color: black;
  text-decoration: underline;
}
.paragraph1 {
  margin: 25px;
  color: #f0c330;
  font-size: 1.2em;
  color: white;
}

<div class="header">
  <nav>
    <h1>Daniel Savva</h1>
    <ul>
      <li> <a href="#">  Home</a> </li>
      <li> <a href="#">  Gallery</a> </li>
      <li> <a href="#">  About</a> </li>
      <li class="lastlist"> <a href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>
<div class="topdiv">
  <h2 class="h2three"> A Spiritual Man </h2>

</div>
<div class="wrapper">

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=jySfU10IQu4">
      <img src="picture1.jpg" alt="Picture1">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=hF-QqKiT1bI">
      <img src="picture2.jpg" alt="picture2">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
      <img src="picture3.jpg" alt="picture3">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=zdrCfNdDrH8">
      <img src="picture45.jpg" alt="picture45">
    </a>
  </div>





  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=S-9dxYcH7sg">
      <img src="picture55.jpg" alt="picture55">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=Nu__TzWfpss">
      <img src="picture66.jpg" alt="picture66">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=QUvVdTlA23w">
      <img src="picture77.jpg" alt="picture77">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=Soa3gO7tL-c">
      <img src="picture9.jpg" alt="picture9">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=jEgX64n3T7g">
      <img src="picture10.jpg" alt="picture10">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=lVL-zZnD3VU">
      <img src="picture11.jpg" alt="picture11">
    </a>
  </div>

  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=S71_vIMQ0YY">
      <img src="picture12.jpg" alt="picture12">
    </a>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://www.youtube.com/watch?v=_FrOQC-zEog">
      <img src="picture13.jpg" alt="picture13">
    </a>
  </div>

</div>

Answer 1

这里有一些方法

您可以使用Bootstrap的网格系统或其他CSS框架（推荐）

如果要创建自己的网格系统。我对您的建议是SCSS Mixin 拥有强大的能力（我之前已经做到过）。你可以研究这个 Article。无论如何，您可以使用以下代码块。

     @mixin grid-generator($size, $grid-columns) {
         @for $i from 1 through $grid-columns {
               .col-#{$size}-#{$i}-#{$grid-columns} {
                width: percentage($i / $grid-columns);
              float: left;
      }
    }
 }

然后再次使用mixin使其具有响应性

                    @mixin respond-from($media) {
                        @if $media == xs {
                            @media (min-width: 0px)  { @content; }
                        } @else if $media == sm {
                          @media (min-width: 768px) { @content; }
                      } @else if $media == md {
                            @media (min-width: 1200) { @content; }
                       } @else if $media == lg {
                        @media (min-width: 1440) { @content; }
                      } @else if $media == xl {
                         @media (min-width: 1800) { @content; }
                        }
                    }


                    @include grid-generator(xs, 12);
                    @include respond-from(sm) {
                          @include grid-generator(sm, 12);
                    }
                    @include respond-from(md) {
                          @include grid-generator(md, 12);
                    }

                    @include respond-from(lg) {
                             @include grid-generator(lg, 12);
                    }

                    @include respond-from(xl) {
                             @include grid-generator(xl, 10);
                             @include grid-generator(xl, 12);
                   }

如何使用-Display：Grid制作响应式网格

1 个答案: