Making a grid system of images and text mobile responsive

user_14916617 0
Viewed 566

I have a container which has three rows and each rows has four columns. I am trying to make this responsive for mobile view but I am unable to do so. For mobile view I want the grid to have six rows instead of three and each row having two columns. And i have tried several ways by changing the css to get the view but i was'nt able to. Do i have to right another container in the react component for getting it or it can achieved using 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>

The css for this component is

.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%;
 }
responsive-design flexbox reactjs css
2 Answers

Use CSS Grid and @media queries to lay out your elements at different screen sizes.

You need to set up your grid container with display: grid, and use grid-template-columns and grid-template-rows to specify how many columns and rows there should be.

So you could start with your mobile layout of 2 columns and 6 rows, and use a @media query to change that layout to 4 columns and 6 rows when the screen is at least a certain width.

Here’s a working example:

.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>

user_130140890

This looks like an ideal use case for CSS grid, because you have a predictable number of rows and columns.

With CSS grid, you can skip having the containers, and use a media query to change the column count at a certain breakpoint.

user_165699040
Related