layout creation like instagram in css - html

Question

I tried to create a layout like instagram in css but faced an issue. i want it to be 3 grid like instagram with a gap of 10px on desktop mode and on below 768px i want it be single grid. i.e #media(max-width:768px) it should be 100% width.work link is attached of codepen[Codepen link of work][1]
[1]: https://codepen.io/TA0011/pen/eYjGvyV
const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
const t = document.querySelector(target.dataset.target)
targets.forEach(t => {
t.classList.remove('active')
})
contents.forEach(c => {
c.classList.remove('active')
})
t.classList.add('active');
target.classList.add('active');
})
})
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
text-transform:uppercase;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>

Answer 1

I gave class names left, mid, right to 3 separate fields. After max-width:768px, I hidden the left and right areas, I created the spaces by giving margin. My English is not very good, you can contact me if you don't understand :)
const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
const t = document.querySelector(target.dataset.target)
targets.forEach(t => {
t.classList.remove('active')
})
contents.forEach(c => {
c.classList.remove('active')
})
t.classList.add('active');
target.classList.add('active');
})
})
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
text-transform:uppercase;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.cards{
display:flex;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
flex-grow:1;
margin-left:10px;
padding: 15px;
max-width:33%;
width:33%;
}
.card.left, .card.right{
display:none;
}
#media only screen and (max-width:768px) {
.card{
max-width:100%;
width:100%;
margin-bottom:10px;
}
.card.left, .card.right{
display:none;
}
.contact .cards, .product .cards {
flex-direction: column;
}
}
#media only screen and (max-width:320px) {
.menu p{
margin-right: 1rem;
font-size:12px;
}
}
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card left">
abc
</div>
<div class="card mid">
abc
</div>
<div class="card right">
abc
</div>
</div>
</div>
<div data-content id="product" class="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact" class="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>