使图像和文本的网格系统具有移动响应性

Question

我有一个容器，它有三行，每行有四列。 我正在尝试使其对移动视图具有响应性，但我无法这样做。 对于移动视图，我希望网格有六行而不是三行，每行有两列。 我已经尝试了几种方法，通过更改 css 来获取视图，但我无法做到。我是否必须在 react 组件中调整另一个容器才能获取它，或者它可以使用 css 来实现？

<Container  fluid={true} className='grid-container' style={{paddingLeft: '0px', paddingRight: '0px'}}>
                               <Row noGutters >
                                    <Col className="grid-col"><img src={first} className="grid-images"/></Col>
                                    <Col className="grid-col"><div className="grid-text">21st century<br/> skills providing<br/> holistic growth.</div></Col>
                                    <Col className="grid-col"><img src={second} className="grid-images"/></Col>
                                    <Col className="grid-col"><div className="grid-text">World's best<br/> educators.</div></Col>
                                </Row>
                               <Row noGutters>
                                    <Col className="grid-col"><div className="grid-text">Masterclass,<br/> Live Projects,<br/>Hackathons,etc.</div></Col>
                                    <Col className="grid-col"><img src={third} className="grid-images"/></Col>
                                    <Col className="grid-col"><div className="grid-text">All under one<br/> subscription.</div></Col>
                                    <Col className="grid-col"><img src={fourth} className="grid-images"/></Col>
                               </Row>
                               <Row noGutters>
                                    <Col className="grid-col"><img src={fifth} className="grid-images"/></Col>
                                    <Col className="grid-col"><div className="grid-text">Start learning with<br/> students all around the world.</div></Col>
                                    <Col className="grid-col"><img src={sixth} className="grid-images"/></Col>
                                    <Col className="grid-col"><div className="grid-text">Learn at your own<br/> pace.</div></Col>
                               </Row>
                         </Container>

这个组件的css是

.grid-container{
    background: linear-gradient(-45deg,  #ee7752, #2746d1, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
    
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.grid-col{
    display:flex;
}

.grid-text{
    display:inline-block;
    align-self: flex-end;
    padding-left:10px;
    font-size: 200%;
}

.grid-images{
    width:100%;
 }

Answer 1

使用CSS Grid 和@media 查询以不同的屏幕尺寸布置您的元素。

您需要使用display: grid 设置您的网格容器，并使用grid-template-columns 和grid-template-rows 指定应该有多少列和行。

因此，您可以从 2 列 6 行的移动布局开始，并在屏幕至少达到一定宽度时使用 @media 查询将该布局更改为 4 列和 6 行。

这是一个工作示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
}

.grid-item {
  padding: 24px;
  text-align: center;
  border: 1px solid black;
}

.grid-item:nth-of-type(odd) {
  background-color: beige;
}

@media screen and (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}

<main class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
  <div class="grid-item">Item 10</div>
  <div class="grid-item">Item 11</div>
  <div class="grid-item">Item 12</div>
</main>

Answer 2

这看起来像是 CSS grid 的理想用例，因为您有可预测的行数和列数。

使用 CSS 网格，您可以跳过容器，并使用媒体查询在某个断点更改列数。