Responsive Layout with Flex and Grid

Once the page structure is stable, layout is the next layer. This lesson shows how to turn a simple content group into a responsive grid without inventing extra wrappers.

Use CSS Grid for section layout and Flexbox for small alignment tasks like buttons, badges, and header rows.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<section class="cards">  
<article class="card">Card one</article>
<article class="card">Card two</article>  
<article class="card">Card three</article>
</section>

.cards { 
   display: grid;  
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1rem;
.card {
   padding: 1rem;  
   border: 1px solid #d8d8d8;  
   border-radius: 8px;  
   background: #fff;}

// Layout lesson.\nconsole.log("Responsive grid loaded");