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.
arieljuod :
If you want it to have only one colum on mobile, define only one:\n\n@media (min-width: 46.25em) {\n .f-2-grid {\n grid-template-columns: 100%;\n }\n}\n\n\nAnd you should probably remove the explicit grid-column property since it will only be 1 column.\n\nI'm not sure if that's what you were asking.",
2019-02-24T17:35:15