我不知道如何在我的网站上创建响应式列？

Question

我很难让这个网格响应。我有 2 行 3 列，每列都有图片和文字。图片大小相同。我想让它响应，所以当它达到一定的宽度时，列重新定位在彼此下方并且字体大小更改为较小的字体。谢谢帮忙！

图片：

.domov2 {
  width: 100%;
  padding: 0px 0 50px 0;
  background-color: #D5D7D7;
  min-height: 450px;
}

.domov22 {
  width: 80%;
  max-width: 960px;
  min-width: 960px;
  overflow: hidden;
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 450px;
}

.grid-container {
  position: relative;
  column-gap: 10%;
  row-gap: 50px;
  margin: 50px 0px 0px 0px;
  /* top right bot left*/
  display: grid;
  grid-template-columns: 23% 24% 23%;
  grid-template-rows: 300px 300px;
  padding: 10px;
  text-align: justify;
}

.slika {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 220px;
  min-width: 220px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<section class="domov2">
  <section class="domov22">
    <div class="grid-container">

      <div>
        <div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br> Izdelamo vam vizualno atraktivno, urejeno spletno stran.</div>

      <div>
        <div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br> Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>

      <div>
        <div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br> SEO optimizacija. Vašo spletno stran optimiziramo tako, da bo dosegala visoke pozicije na “google” iskalniku.</div>

      <div>
        <div class=slika> <img src="slike/support.png" height=140 class="center"></div><br> Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>

      <div>
        <div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br> Hitra, prijazna in odzivna podpora uporabnikom.</div>

      <div>
        <div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br> Nudimo brezplačno prvo svetovanje na daljavo. </div>
    </div>
  </section>
</section>

Answer 1

让您自行决定进行移动适配。在 css 中你可以看到添加的两个媒体查询@media。您可以根据自己的喜好设置调整大小的数字。另外，我删除了.domov22 中的min-width: 960px 规则，因为该规则阻止了块被制成“橡胶”。另外，我已经在grid-template-columns: repeat(3, 1fr) 上替换了您的网格-template-columns: 23% 24% 23% 希望它有所帮助。如有任何问题，请联系。

.domov2{
  width:100%;
  padding: 0px 0 50px 0;
  background-color: #D5D7D7;
  min-height:450px;  }

.domov22{
  width:80%;
  max-width:960px;
  /*min-width:960px;*/
  overflow:hidden;
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  min-height:450px;  }

.grid-container {
  position:relative;
  column-gap:10%;
  row-gap:50px;
  margin: 50px 0px 0px 0px; /* top right bot left*/
  display: grid;
  /*grid-template-columns: 23% 24% 23%;*/
      grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 300px ;
  padding: 10px; 
  text-align: justify;}

.slika{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:220px;
  min-width:220px;}

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
  @media(max-width: 950px){
   .grid-container {
      grid-template-columns: repeat(2, 1fr);
      }
  }
  
   @media(max-width: 550px){
   .grid-container {
      grid-template-columns: repeat(1, 1fr);
      }
  }

<section class="domov2">
        <section class="domov22">
            <div class="grid-container">

                <div><div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br>
                Izdelamo vam vizualno atraktivno, urejeno spletno stran.</div>

                <div><div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br>
                Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>

                <div><div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br>
                SEO optimizacija. Vašo spletno stran optimiziramo tako, da bo dosegala visoke pozicije na “google” iskalniku.</div>

                <div><div class=slika> <img src="slike/support.png" height=140 class="center"></div><br>
                Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>

                <div><div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br>
                Hitra, prijazna in odzivna podpora uporabnikom.</div>

                <div><div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br>
                Nudimo brezplačno prvo svetovanje na daljavo. </div>   
            </div>
        </section>
    </section>

Answer 2

参考：https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

您可以在不使用 @media 查询的情况下自动调整列的大小

这会根据屏幕大小调整您的列

display:grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

.domov2 {
  width: 100%;
  padding: 0px 0 50px 0;
  background-color: #D5D7D7;
  min-height: 450px;
}

.domov22 {
  width: 80%;
  max-width: 960px;
  /*min-width:960px;*/
  overflow: hidden;
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 450px;
}

.grid-container {
  position: relative;
  column-gap: 10%;
  row-gap: 50px;
  margin: 50px 0px 0px 0px;
  /* top right bot left*/
  display: grid;
  /*grid-template-columns: 23% 24% 23%;*/
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 300px 300px;
  padding: 10px;
  text-align: justify;
}

.slika {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 220px;
  min-width: 220px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media(max-width: 950px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 550px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

<section class="domov2">
  <section class="domov22">
    <div class="grid-container">

      <div>
        <div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br> Izdelamo vam vizualno atraktivno, urejeno spletno stran.</div>

      <div>
        <div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br> Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>

      <div>
        <div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br> SEO optimizacija. Vašo spletno stran optimiziramo tako, da bo dosegala visoke pozicije na “google” iskalniku.</div>

      <div>
        <div class=slika> <img src="slike/support.png" height=140 class="center"></div><br> Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>

      <div>
        <div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br> Hitra, prijazna in odzivna podpora uporabnikom.</div>

      <div>
        <div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br> Nudimo brezplačno prvo svetovanje na daljavo. </div>
    </div>
  </section>
</section>