css grid layout for tablet-CodePudding

I have 3 divs that I am showing in a row using css grid layout for desktops. For phone, I am showing 1 div per row. For tablets (min-width:768px), I want only the first div to appear on the first row. And the other two divs on second row side by side. But I can't figure out how to do that in the grid layout using grid-template columns. Any help will be much appreciated. Here's a simpler version of my code:

.outer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}


/** media queries for phones and up*/

@media only screen and (min-width:320px) and (max-width:767px) {
  .outer {
    grid-template-columns: repeat (1, 1fr);
  }
}


/** media queries for tablets*/

@media only screen and (min-width:768px) {
  .outer {}
}

<div >

  <div >
    <p>I am div 1</p>
  </div>

  <div >
    <p>I am div 2</p>
  </div>

  <div >
    <p>I am div 3</p>
  </div>

</div>

CodePudding user response：

You want grid-template-columns: 1fr 1fr; to set the grid layout to 2 columns, and you want to get the first div to take the space of 2 columns, and the rest 1 column each. You can do this many ways, but I think the one that makes most sense is to select the .inner:first-child to get the first div and set it to grid-column: 1 / span 2;. This makes the selected element take the space of a span of 2 columns, starting from the 1st column, which is what you want.

.outer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}


/** media queries for phones and up*/

@media only screen and (min-width:320px) and (max-width:767px) {
  .outer {
    grid-template-columns: 1fr;
  }
}


/** media queries for tablets*/

@media only screen and (min-width:768px) {
  .outer {
    grid-template-columns: 1fr 1fr;
  }
  .inner:first-child {
    grid-column: 1 / span 2;
  }
}

<div >

  <div >
    <p>I am div 1</p>
  </div>

  <div >
    <p>I am div 2</p>
  </div>

  <div >
    <p>I am div 3</p>
  </div>

</div>

CodePudding user response：

.outer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/** media queries for phones and up*/
@media only screen and (min-width:320px) and (max-width:767px) {
    .outer {
        grid-template-columns: repeat(2, 1fr);
    }

    .outer .inner:first-child {
        grid-column: 1 / 3;
        color: red;
    }
}

/** media queries for tablets*/
@media only screen and (min-width:768px) {
    .outer {}
}

<div >

    <div >
        <p>I am div 1</p>
    </div>

    <div >
        <p>I am div 2</p>
    </div>

    <div >
        <p>I am div 3</p>
    </div>

</div>

@avocado Please check the result. First remove the space between repeat and bracket - repeat(2, 1fr) and add the grid-column: start/end. Hope it is helpful~

CodePudding user response：

Follow the URL below to resolve your Responsive Issue.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

Use this css property to make tablet layout responsive

grid-template-areas:
grid-area: