Take 2 Columns in 2-Columns Layout But Not When 1-Column Layout in CSS Grid Without @Media

Take 2 columns in 2-columns layout but not when 1-column layout in CSS grid without @media

Use grid-column: 1/-1;

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

Restricting responsive grid to 2 columns max?

Use max() combined with viewport unit to make the column width always big enough to always have a fixed number of columns on big screen (in your case 2).

grid-template-columns: repeat(auto-fit, minmax(max(195px,Xvw), 2fr));

Adjust the X until you get the result you want.

Example:

.box {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(max(195px, 45vw), 2fr));
  margin: 10px;
  grid-gap: 40px;
}

.box>* {
  height: 100px;
  background: red
}

<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Responsive two column css grid

Media queries

If you want to resize your grid or stack one of each other when writing css, you should set media queries and write the expected rules in order to the grid behave well.

For example, you have this HTML structure

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
</div>

.grid{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  column-gap: 20px;
}

If you want that to (for example) stack one column on each other when the screen view is less than 992px (md width in bootstrap) you could do a media querie

.grid{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  column-gap: 20px;
}

@media screen and (max-width: 992px){
   .grid{
      grid-template-columns: repeat(2, 1fr);
   }
}

You can set rules when the viewport is smaller and keeping your web looking great. Hope this article helps: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

CSS Grid single column layout for mobile without media queries

No you must use media query

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "one" "two" "three" "four";
}

CSS responsive 2 column layout item ordering issue

Sounds like this could be solved perfectly with css grids.
This allows you to mix and position it ay way you want. Using flexbox would also be an option. Or you could change your HTML to have columns devided into rows instead of the other way around. If you place the 2 columns underneath each other, you'll have the same result.

https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "one three"
    "two four";
}

.container div:nth-child(1) { grid-area: one; }
.container div:nth-child(2) { grid-area: two; }
.container div:nth-child(3) { grid-area: three; }
.container div:nth-child(4) { grid-area: four; }

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "one"
      "two"
      "three"
      "four";
  }
}

<div class="container">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
</div>

---

Related Topics