🔒 Closed Responsive css grid

[SUNRAI]

Hello paano ko po ba gagawing responsive yung lahat ng grid na para sa mobile device?

body {
  text-align: center;
  font-family: "Dosis";
}

.grid-container {
  display: grid;
  grid-template-columns: 0.25fr 10px 0.75fr;
  grid-template-rows: auto 20px auto 20px auto 20px auto;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
}
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 6;
  background: #6F9;
}

.main {
  grid-column-start: 3;
  grid-column-end: 4;
   grid-row-start: 3;
  grid-row-end: 4;
  background: #F69;
  height:400px;
}

.extra {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  background: #9F6;
}

.footer {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 8;
  background: #F96;
} 

@media only screen and (max-width:600px) {
  /* Responsive for mobile*/
  .grid-container > div{
    width: 100%;
  }
}

 

[PHC_Jayvee]

lagay mo sa head ng html to paraaging responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

[Muzaaan]

gamit ka nalang template area then sa media query stack mo nalang yung template