Displaying columns using grid property with template columns & rows

SarahLacy 0
Viewed 33

I am trying to display grid with columns and rows. I want to follow the method describe here
The reason i am using that method is it requires minimum css (just one line).

I have accomplished almost 98% just unable to get one thing remained is i am not able to get 1) columns aligned properly 2) vertical scroll bar for mobile.

I am new so unable to describe exact issue using words. So, I am posting image enter image description here

I have tried a lot and also studied grid property but unable to get it done. Below is my code....

var slider = document.getElementById('slider');
var toggle = document.getElementById('toggle');

toggle.addEventListener('click', function() {
  var isOpen = $slider.classList.contains('slide-in');

  slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

function myFunction() {
  var change = document.getElementById("toggle"); // <button id="toggle">
  if (change.textContent == "Close") {
    change.textContent = "Before After Result";
  } else {
    change.textContent = "Close";
  }
}
#slider {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 3fr));
  grid-template-rows: repeat(2, 100px);
  position: fixed;
  bottom: 25px;

  width: 100%;
  background: blue;
  transform: translateX(-100%);
}
    #slider > div > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.slide-in {
  animation: slide-in 0.5s forwards;
}
.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
<div class="container">
  <div id="slider" class="slide-in">

    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>

  </div>
</div>



<button id="toggle" onclick="myFunction()" style="position:fixed;bottom:0;background-color:#f14e4e;overflow:auto;" class="button4">Close</button>

css-grid javascript css
1 Answers

Use Auto-fit

Collapses third column to min value => 100 px

Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it (this can result in all tracks being collapsed, if they're all empty).

A collapsed track is treated as having a single fixed track sizing function of 0px, and the gutters on either side of it collapse.

For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., 1px), to avoid division by zero.

Jan Kolbuszewski0
Related