Lexi Posts - Answer Overflow

Lexi

•Created by Lexi on 11/15/2024 in #front-end

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;
  }
}

47 replies

KPCKevin Powell - Community

•Created by Lexi on 11/11/2024 in #front-end

Container grid system using react CSS modules, full-width being overridden by content-grid

I was following the "A new approach to container and wrapper classes" and trying to hook it up to a react project using CSS modules. However, when I use my full-width class it gets overwritten by the content-grid class. Is there an incapability with React CSS modules and this type of layout? Or am I missing something?

.content-grid {
  --padding-inline: 2rem;
  --content-max-width: 120ch;
  --breakout-max-width: 140ch;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

.content-grid {
  --padding-inline: 2rem;
  --content-max-width: 120ch;
  --breakout-max-width: 140ch;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

11 replies

Gaming

Programming