CODEWITHSUNDEEP
csscss-gridstyled-components
Kishor Shrestha
Kishor Shrestha

Reputation: 43

How to wrap grid item to full width with one column taking 2 spans in an auto-fit grid-column-template

I am using styled-components but I think that won't make much of a difference. What I want to do is to make the grid automatically align to row width. When I apply 2 span for the preceding column, the following column does not wrap to full width on a certain range of view port width. After, I decrease the view port more then it goes back to what I want. How can I fix this without using media queries and flexbox? I know this can be fixed with media queries but I want to do it without it.

gif

const LogoContact = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 150px;
`;

const Logo = styled.div`
  background-color: #a85218;
  grid-column: span 2;
  color: white;
`;

const Contact = styled.div`
  background-color: #d0507e;
  color: white;
`;

LogoContact is the parent container and Logo is for the column that takes 2 spans. Contact div is what I want to fix.

Upvotes: 1

Views: 1418

Answers (1)

CvP
CvP

Reputation: 364

One option would be using media queries and give the contact div a span of 2 when between 300 and 600 screenwidth.

A better solution would be using flexbox instead of grid. Here's an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      #logoContact {
        display: flex;
        flex-wrap: wrap;
      }

      #logo {
        min-height: 150px;
        min-width: 600px;
        background-color: #a85218;
        flex: 2 1;
        color: white;
      }

      #contact {
        min-height: 150px;
        min-width: 300px;
        flex: 1 1;
        background-color: #d0507e;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="logoContact">
      <div id="logo">logo</div>
      <div id="contact">contact</div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions