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

Posted 2023-03-06

【中文标题】使图像和文本的网格系统具有移动响应性

【英文标题】：Making a grid system of images and text mobile responsive

【发布时间】：2021-10-07 11:43:58

【问题描述】：

我有一个容器，它有三行，每行有四列。 我正在尝试使其对移动视图具有响应性，但我无法这样做。 对于移动视图，我希望网格有六行而不是三行，每行有两列。 我已经尝试了几种方法，通过更改 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%;
 

【参考方案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>

【参考方案2】：

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

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

【讨论】：

所以我应该通过给它们一个类名并执行类似@media screen and (max-width:575px) .grid-rows column-count: 2; 的操作来将列数添加到行。但这不起作用。