css - Responsive named grid-template-columns?

Question

How does the naming grid-template-columns work in relation to media queries and responsiveness?

I'm trying to learn this and started with a very basic 2 column grid, from tablet and above its a 50/50 grid however, tablet below i want it on top of each other.

I'm using the fr unit so 1fr for each side when i want it 50/50 but how do it tell it to ignore that on mobile?

auto doesn't seem to work and neither does 100%.

This is what i have so far. Grid setup:

.f-2-grid {
  grid-template-columns: [left-side] auto [right-side] auto;
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

Targeting the 2 columns:

.footer-contact.f-2-grid-box {
  grid-column: left-side;
}

.follow-icons.f-2-grid-box {
  grid-column: right-side;
}

I'm sure this is a simple idea and apologies for the simple question but cannot seem to find the correct way from all the tutorials I've read.

标签： csscss-grid

Answer 1

谢谢你，它让我走上了正确的道路......这成功了......

.f-2-grid {
  /*nothing needed here*/
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

@media (min-width: 46.25em) {
  .footer-contact.f-2-grid-box {
    grid-column: left-side;
  }
}


@media (min-width: 46.25em) {
  .follow-icons.f-2-grid-box {
    grid-column: right-side;
  }
}