Centring CSS Grid Layout cards

Question

After i made with some help some CSS Grid Layouts where they are as well web responsive and Mobile i have a issue to center these card. I tried justify-content:center on the Grid container without much success! Any clue?

I have a image as well attached Below the css and html code

   .grid {
    display: grid;
    grid-area:test;
    background-color: blue;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    
    grid-gap: 20px;
 
    align-items: stretch;
 
  }

  article{
    padding:10px;
    margin-left: 10px;
    margin-right: 10px;
    
    
    
  }

  .grid>article {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    display: flex; /* <-------------- changes */
    flex-direction: column; /* <-------------- changes */
    
  }
  
  .grid>article img {
    max-width: 100%;
  }
  
  .text {
    padding: 0 20px 20px;
    flex-grow: 1;
    display: flex; /* <-------------- changes */
    flex-direction: column; /* <-------------- changes */
  }
  
  .text>p {
    flex-grow: 1; /* <-------------- changes */
  }
  
  .text>button {
    background: gray;
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
  }

HTML

 <main class="grid">
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Seamlessly visualize quality</h3>
            <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
            <button>Here's why</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Completely Synergize</h3>
            <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
            <button>Here's how</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Dynamically Procrastinate</h3>
            <p>Completely synergize resource taxing relationships via premier niche markets.</p>
            <button>Read more</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Best in class</h3>
            <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
            <button>Just do it...</button>
          </div>
        </article>
        <article>

also anyone would have a better suggestion design for dynamic web responsive CSS Grid Layout cards? Though i like their current width and height when the browser reach a specific viewport they are getting squarish.

Edit: When i am using repeat(auto-fit, minmax(200px,1fr)); instead of the parameter auto-fill i am getting this ugly streching.On my full browsers viewport though. When i minimize the window they get as they were with auto-fill in the first pict

Adam Specker Adam Specker · Accepted Answer · 2020-10-15T23:49:08

It seems the issue is arising with your usage of auto-fill. Based on this resource from the excellent blog css-tricks, auto-fill will create empty columns to fill the screen (with a min width of 200px, as you've specified).

auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

Try changing to

.grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

Centring CSS Grid Layout cards

1 Answers