CODEWITHSUNDEEP
csscss-grid
Musaffar Patel
Musaffar Patel

Reputation: 1342

CSS Grid layout change width of specific columns with class

.grid {
  display: grid;
  grid-template-columns: 80% 20%;
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item-special"></div>
  <div class="grid-item-special"></div>
</div>

So far the above is straight forward, each row will contain two columns with respective widths of 80% and 20%

However I wish to adapt the above to make it responsive. On smaller screens any div with class "grid-item" will occupy 100% of the width (so each row will contain one column)

The above is not a problem, however further to the above I want any div with the class "grid item-special" to occupy 50% of the width.

The image shows what I am attempting to accomplish:

enter image description here

I need to avoid changing the html markup if possible.

Any ideas would be welcomed.

Upvotes: 1

Views: 2803

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You can create media query and change grid on smaller screen

.grid {
  display: grid;
  grid-template-columns: 80% 20%;
  text-align: center;
}
.grid-item, .grid-item-special{
  border: 1px solid black;
}
@media (max-width: 400px) {
  .grid {
    grid-template-columns: auto;
  }
  .grid-item {
    grid-column: span 2;
  }
  
}
<div class="grid">
    <div class="grid-item">11</div>
    <div class="grid-item">11</div>
    <div class="grid-item-special">22</div>
    <div class="grid-item-special">22</div>
</div>

Upvotes: 3

Related Questions