This example use the align-items value of stretch which results in all cards stretching to the maximum height. This is the initial value anyway. Auto-fill wll fit as many cards in each row, Each card has a minimum width of 250 pixels.
Created
October 25, 2023 15:36
-
-
Save ichoake/f1d7be08ac1229ab60c7822932a55380 to your computer and use it in GitHub Desktop.
CSS Grid Card Example Responsive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <main class="grid"> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1083" alt="Sample photo"> | |
| <div class="text"> | |
| <h3>Seamlessly visualize quality</h3> | |
| <p>Collaboratively administrate empowered markets via plug-and-play networks.</p> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Here's why</a> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1063" 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> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Here's how</a> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1056" alt="Sample photo"> | |
| <div class="text"> | |
| <h3>Dynamically Procrastinate</h3> | |
| <p>Completely synergize resource taxing relationships via premier niche markets.</p> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Read more</a> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1050" 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> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Just do it...</a> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1041" alt="Sample photo"> | |
| <div class="text"> | |
| <h3>Dynamically innovate supply chains</h3> | |
| <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Here's why</a> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="https://picsum.photos/600/400?image=1015" alt="Sample photo"> | |
| <div class="text"> | |
| <h3>Sanity check</h3> | |
| <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p> | |
| <a href="https://codepen.io/collection/XdWJOQ/" class="btn btn-primary btn-block">Stop here</a> | |
| </div> | |
| </article> | |
| </main> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding: 40px 0; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| grid-gap: 20px; | |
| align-items: stretch; | |
| } | |
| .grid > article { | |
| border: 1px solid #ccc; | |
| box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); | |
| } | |
| .grid > article img { | |
| max-width: 100%; | |
| } | |
| .grid .text { | |
| padding: 20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
card