Kevin Powell - Community•3mo ago

How to Handle Missing Grid Columns for Mobile Design in Figma?

Hi, so I was watching a Coder Coder project video where she was converting a Figma design to HTML and CSS. The design included grid columns for desktop, tablet, and mobile styles. She was using CSS Grid for the wrapper/container like this:

.wrapper {
  --wrapper-width: 1440px;
  --space-lr: 40px;
  --space-gap: 20px;
  --col-count: 2;
  display: grid;
  grid-template-columns:
    1fr repeat(
      var(--col-count),
      calc(
        (
            min(
                100% - var(--space-lr),
                calc(var(--wrapper-width) - var(--space-lr))
              ) - (var(--col-count) - 1) * var(--space-gap)
          ) / var(--col-count)
      )
    )
    1fr;
  gap: var(--space-gap);
}

.wrapper {
  --wrapper-width: 1440px;
  --space-lr: 40px;
  --space-gap: 20px;
  --col-count: 2;
  display: grid;
  grid-template-columns:
    1fr repeat(
      var(--col-count),
      calc(
        (
            min(
                100% - var(--space-lr),
                calc(var(--wrapper-width) - var(--space-lr))
              ) - (var(--col-count) - 1) * var(--space-gap)
          ) / var(--col-count)
      )
    )
    1fr;
  gap: var(--space-gap);
}

and then she was using grid lines for positioning. So I decided to convert a Figma design into HTML and CSS myself, but the design only has grid columns set for the desktop view. What should I do in this case to create responsive layouts for tablet and mobile?

1 Reply

Chris Bolson•3mo ago

The answer will most likely depend both on the design and your current code. Share those (the code ideally in a Codepen or similar) and somebody may be able to help you further.

Gaming

Programming

How to Handle Missing Grid Columns for Mobile Design in Figma?