Kevin Powell - Community•2mo ago

CSS Grid not resizing on media query with new grid-template-columns

Full disclosure: I'm working in react using react.modules.css file structure. I originally set up my grid-template-column as 1fr 1fr auto 2fr and I'm trying to change it to just a 1fr 1fr structure at smaller screen sizes. Not entirely sure what I'm doing wrong. https://cherished-moments.vercel.app/ current deployed version of the code. CSS

.footerGrid {
  display: grid;

  grid-template-columns: 1fr 1fr auto 2fr;
  gap: 1rem;
}

.footerGrid h3,
.footerGrid a {
  color: var(--primary-100);
  font-family: 'Montserrat';
}

.footerGrid > nav > ul > li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.footerGrid h3 {
  font-weight: 400;
}

.footerGrid nav h3 {
  margin-bottom: var(--spacing-xs);
}

.footerGrid input {
  width: calc(100% - 1rem);
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.footerGrid form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;

  gap: 0.75rem;
}

.footerGrid form h3,
.footerGrid form input:nth-child(4) {
  grid-column: 1/3;
}

.footerGrid button {
  font-size: 1rem;
  font-weight: 400;
}

.footerPadding {
  padding: var(--spacing-l);
}

@media screen and (max-width: 1000) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footerGrid nav:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .footerGrid nav:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .footerGrid img {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .footerGrid form {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

.footerGrid {
  display: grid;

  grid-template-columns: 1fr 1fr auto 2fr;
  gap: 1rem;
}

.footerGrid h3,
.footerGrid a {
  color: var(--primary-100);
  font-family: 'Montserrat';
}

.footerGrid > nav > ul > li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.footerGrid h3 {
  font-weight: 400;
}

.footerGrid nav h3 {
  margin-bottom: var(--spacing-xs);
}

.footerGrid input {
  width: calc(100% - 1rem);
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.footerGrid form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;

  gap: 0.75rem;
}

.footerGrid form h3,
.footerGrid form input:nth-child(4) {
  grid-column: 1/3;
}

.footerGrid button {
  font-size: 1rem;
  font-weight: 400;
}

.footerPadding {
  padding: var(--spacing-l);
}

@media screen and (max-width: 1000) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footerGrid nav:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .footerGrid nav:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .footerGrid img {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .footerGrid form {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

Create Next App

Generated by create next app

27 Replies

b1mind•2mo ago

1000 is not valid unit you just forgot the px is all 😄

LexiOP•2mo ago

... Thank you 😂

b1mind•2mo ago

Few tips though don't use heading levels for font sizes they should make semantic sense, also grid-gap is not a thing anymore its just gap Also if you use multiple <nav> elements you need to give them names with different aria-labels for a11y 🙂

LexiOP•2mo ago

Gotcha. In the case of a footer is there any heading that should be used?

b1mind•2mo ago

nope I wouldn't use a heading level for them at all make it a <b> size it how you want in css

LexiOP•2mo ago

any particular reason for using b?

b1mind•2mo ago

nope I just like to 😂 if I want something bold and don't need it to be readout differently <strong> if I do Just one less thing to write in css 🤷‍♂️

LexiOP•2mo ago

Thank you!

b1mind•2mo ago

typically I would have a .title-sm util class or something too so it would only be the size but I could make it bold with <b class="title-sm"> if that makes any sense just a b thang Or I would just have that bold anyway and control lthe boldness with the class and still use <b> lol (lots of people will disagree with this though so thats a choice for you to make)

LexiOP•2mo ago

So on set-up you'd have h1, title-xl {}, h2, title-l {}, h3 title-m {} etc?

b1mind•2mo ago

YUP! I might separate them too depends on the design/sytem. Like if for some reason I had h2's that I want visually small but lots of times you can do like <h2 class="title-m"> in the case you setup

LexiOP•2mo ago

Gotcha, makes sense. I'm still trying to learn best practices and definitely have a lot to learn for sure

b1mind•2mo ago

np! you are doing great keep it up oh one last tip 😂

b1mind•2mo ago

b1mind•2mo ago

You are getting overscroll here I think cause the padding is on your wrapper class oh no I'm wrong sec

LexiOP•2mo ago

I just now realized that

b1mind•2mo ago

I would still put the padding on <footer> I'm not sure whats causing the h-scroll 😮

LexiOP•2mo ago

Forgive my ignorance but h-scroll?

b1mind•2mo ago

gah I love these wrappers ❤️ glad you are paying attention to Kevins recent stuff Horizontal scrolling

b1mind•2mo ago

This is one those times I still wish I had Polypane browser.. I need to renew my sub Might want to open a new post for this and get some fresh eyes on that one. ( I need sleep bad) quick hack would be to set overflow-x: hidden; on body but its just a hack not solving the actual overflow

LexiOP•2mo ago

I'm probably going to let it ride until tomorrow as well.

b1mind•2mo ago

found it 😂

b1mind•2mo ago

LexiOP•2mo ago

🙃 -sigh-

b1mind•2mo ago

So put overflow: hidden; on .page_decorative or the p child not sure. but thats your culprit

clevermissfox•2mo ago

Btw instead of having to redeclare all the grid columns and grid rows in the media query, you can give the children grid-areas and save yourself a lot of grief. Make them more meaningful names but for this example I'll just something generic.

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

Instead of redeclaring all the children's grid-column or grid-row, you just redeclare the grid-areas in your grids

Gaming

Programming

CSS Grid not resizing on media query with new grid-template-columns