<header>
<h1>logo</h1>
<div class="menu">
<div class="submenu">
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="submenu">
<div class="item">item</div>
<div class="item">item</div>
</div>
</div>
</header>
<div class="flex">
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
<div class="card">
This is a card
</div>
</div>
/* Grid will take card of a responsive gallery without the need of width mediau qeries for breakpoints */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 1rem;
padding: 2rem;
}
.flex {
display: flex;
gap: 10px;
}
/* Card styles */
.card {
border: 4px solid black;
padding: 1rem;
min-height: 6rem;
}
header {
background: red;
display: flex;
justify-content: space-between;
}
.menu {
display: flex;
gap: 4rem;
}
.submenu {
display: flex;
gap: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.