How to make a clean responsive grid of rectangle shapes

  • The dimensions of the grid is a 4x3 grid of rectangle shapes.
    Here is a link to see what it looks like:

    This is the CSS for each shape:

    <div style={{ 
                 justifyContent: 'center', 
                 alignItems: 'center', 
                 padding: 10, 
                 display: 'inline-block', 
                 width: '25%', 
                 textAlign: 'center' 

    This is the styling for the container that's holding all the cards:

    <div className="container" 
                  display: 'inherit', 
                  justifyContent: 'flex-start', 
                  paddingBottom: 30 

    Is there a better way I can get these shapes to be really mobile responsive and stack dynamically when the screen width shrinks?

  • You can try the following:

    1. On the parent container ".container" apply the following styles:
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
     grid-gap: 20px;
     align-items: stretch;
    1. Remove all children div's and just have img elements without being wrapped around any other element.
      So something like this:
    <main class="container">
      <img src="/pix/samples/23m.jpg" alt="Sample photo">
      <img src="/pix/samples/24m.jpg" alt="Sample photo">
      <img src="/pix/samples/22l.jpg" alt="Sample photo">
      <img src="/pix/samples/15l.jpg" alt="Sample photo">
      <img src="/pix/samples/25m.jpg" alt="Sample photo">
      <img src="/pix/samples/16l.jpg" alt="Sample photo">
    1. Apply the following styles to the the img's (You can add a shared class name to all img elements)
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    max-width: 100%;

    It adjusts quiet nicely when you shrink the screen.

    Here is where I got the info from:

Log in to reply