Last active
September 23, 2023 11:24
-
-
Save phatnguyenuit/48aa71dc1547fedd056835aaf5efd5c4 to your computer and use it in GitHub Desktop.
Flexbox - Sample UI for displaying cards which have the same size even though it is wrapped due to breakpoints.
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Subscriptions</title> | |
| <style> | |
| .subscriptions { | |
| width: 100%; | |
| height: auto; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .subscription { | |
| min-width: 150px; | |
| background-color: antiquewhite; | |
| border: 1px solid brown; | |
| display: flex; | |
| flex-direction: column; | |
| flex-grow: 1; | |
| } | |
| .subscription-header { | |
| padding: 0 16px; | |
| background-color: lightgreen; | |
| min-height: 100px; | |
| } | |
| .subscription-benefits { | |
| padding: 0 16px; | |
| background-color: lightcoral; | |
| flex-grow: 1; | |
| } | |
| .subscription-price { | |
| padding: 0 16px; | |
| background-color: greenyellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Subscriptions</h1> | |
| <div class="subscriptions"> | |
| <div class="subscription"> | |
| <div class="subscription-header"> | |
| <p>Subscription 1</p> | |
| </div> | |
| <div class="subscription-benefits"> | |
| <ul> | |
| <li>Benefit #1</li> | |
| </ul> | |
| </div> | |
| <div class="subscription-price"> | |
| <p>$20.00</p> | |
| </div> | |
| </div> | |
| <div class="subscription"> | |
| <div class="subscription-header"> | |
| <p>Subscription 2</p> | |
| </div> | |
| <div class="subscription-benefits"> | |
| <ul> | |
| <li>Benefit #1</li> | |
| <li>Benefit #2</li> | |
| </ul> | |
| </div> | |
| <div class="subscription-price"> | |
| <p>$30.00</p> | |
| </div> | |
| </div> | |
| <div class="subscription"> | |
| <div class="subscription-header"> | |
| <p>Subscription 3</p> | |
| </div> | |
| <div class="subscription-benefits"> | |
| <ul> | |
| <li>Benefit #1</li> | |
| <li>Benefit #2</li> | |
| <li>Benefit #3</li> | |
| <li>Benefit #4</li> | |
| </ul> | |
| </div> | |
| <div class="subscription-price"> | |
| <p>$50.00</p> | |
| </div> | |
| </div> | |
| <div class="subscription"> | |
| <div class="subscription-header"> | |
| <p>Subscription 4</p> | |
| </div> | |
| <div class="subscription-benefits"> | |
| <ul> | |
| <li>Benefit #1</li> | |
| <li>Benefit #2</li> | |
| <li>Benefit #3</li> | |
| <li>Benefit #4</li> | |
| <li>Benefit #5</li> | |
| <li>Benefit #6</li> | |
| <li>Benefit #7</li> | |
| </ul> | |
| </div> | |
| <div class="subscription-price"> | |
| <p>$100.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Using CSS Flexbox to solve the problem.
Flex grow is coming to the stage :-)