Grid to list Basic Mechanism - not responsive

grid-to-list-basic-mechanism-not-responsive.markdown

Grid to list Basic Mechanism - not responsive

A Pen by gilad on CodePen.

License.

index.html

<div class="gridview">
  <div class="canban1">
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
     <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
     <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" /></div>
    <div class="card"><img class="cardbg" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" /></div>
  </div>
</div>
<div class="listviewx">
  <!--<div class="canban2">
    <div class="bigoneleft">
      <div class="content">
        <h1>כותרת גדולה שם הפרוייקט</h1>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" />
    </div>
  </div>-->
  <div class="sections c-scroll-snap c-scroll-snap--y-mandatory">
  <section style="background-color: #FF2ABB;">
    <div class="content2"></div>
     <div class="canban2">
    <div class="bigoneleft">
      <div class="content-right-list">
        <h2>כותרת גדולה שם הפרוייקט</h2>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" />
    </div>
  </div>
  </section>
  <section style="background-color: #C200E8;">
    <div class="content2"></div>
     <div class="canban2">
    <div class="bigoneleft">
      <div class="content-right-list">
        <h2>כותרת גדולה שם הפרוייקט</h2>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" />
    </div>
  </div>
  </section>
  <section style="background-color: #8916FF;">
    <div class="content2"></div>
    <div class="canban2">
    <div class="bigoneleft">
      <div class="content-right-list">
        <h2>כותרת גדולה שם הפרוייקט</h2>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" />
    </div>
  </div>
  </section>
  <section style="background-color: #593EF1;">
    <div class="content2"></div>
    <div class="canban2">
    <div class="bigoneleft">
      <div class="content-right-list">
        <h2>כותרת גדולה שם הפרוייקט</h2>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/04/21/14/13/pelican-8710717_1280.jpg" />
    </div>
  </div>
  </section>
  <section style="background-color: #3358FF;">
    <div class="content2"></div>
     <div class="canban2">
    <div class="bigoneleft">
      <div class="content-right-list">
        <h2>כותרת גדולה שם הפרוייקט</h2>
        <p>תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור תיאור וכל מה שכולל את התיאור</p>
        <span>קישור לפרוייקט</span>
</div>
    </div>
    <div class="bigoneright">
      <img class="cardbg2" src="https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg" />
    </div>
  </div>
  </section>
</div>
</div>
<div class="btns">
<button class="clicklist">grid</button>
<button class="closelist">list</button>
</div>

script.js

// Get the grid
var gridview = document.querySelector(".gridview");
// Get the list view
var listview = document.querySelector(".listviewx");
// Get the button that shows the grid
var clicklist = document.querySelector(".clicklist");
// Get the <span> element that closes the listview
var closelist = document.querySelector(".closelist");

// When the user clicks the button, open the listview 
clicklist.onclick = function() {
  if (gridview && listview) {
    gridview.style.display = "block"; // Show the grid
    listview.style.display = "none"; // Hide the list view when grid is visible
  }
}

// When the user clicks on <span> (x), close the listview
closelist.onclick = function() {
  if (gridview && listview) {
    gridview.style.display = "none"; // Hide the gridview 
    listview.style.display = "block"; // Show the list view when grid is closed
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == gridview) {
    gridview.style.display = "none"; // Hide the modal
    listview.style.display = "block"; // Show the list view
  }
}

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

::-webkit-scrollbar {
    display: none;
}
/*.closelist{
  position: absolute;
  top 30px;
  left: 30px;
  cursor: pointer;
}*/
.canban1 {
  padding: 15px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100vh;
  gap: 20px;
}

.canban2 {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.content-right-list {
  display: flex;
  direction: rtl;
  padding: 100px 40px;
  flex: 0 0 auto;
  justify-content: center;
  align-items: right;
  flex-direction: column;
  height: 100vh;
}
.card {
  width: 100%;
  height: auto;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #b2b2b2;
  cursor: pointer;
  box-shadow: 5px 5px 20px #555;
}
.cardbg {
  poisition: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

.cardbg2 {
  poisition: absolute;
  top:0;
  right:0;
  height: 100%;
  width: 100%;
}


.btns {
  position: fixed;
  left: 10px;
  top: 10px;
}

button {
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #b2b2b2;
  box-shadow: 1px 1px 10px #b2b2b2;
}

#listview {
  display: none;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
}

#gridview {
   width: 100%;
   height: 100vh;
}

.bigoneleft {
  height: 100vh;
  width: 50%;
  border: 0px solid #111;
}
.bigoneright {
  height: 100vh;
  width: 50%;
  border: 0px solid #111;
}

/* list view */
.c-scroll-snap {
  max-height: 100vh;
  overflow-y: scroll;
}
.c-scroll-snap--y-proximity {
  scroll-snap-type: y proximity;
  scroll-snap-points-y: repeat(100vh);
}
.c-scroll-snap--y-mandatory {
  scroll-snap-type: y mandatory;
  scroll-snap-points-y: repeat(100vh);
}
.c-scroll-snap > * {
  height: 100vh;
  scroll-snap-align: start;
}

.sections {
  counter-reset: section;
}
.sections:after {
  display: block;
  content: " / " counter(section);
  position: absolute;
  bottom: 10%;
  left: 65px;
  color: white;
}

section {
  color: white;
  counter-increment: section;
  position: relative;
}
section:before {
  content: counter(section);
  position: absolute;
  bottom: 10%;
  left: 45px;
}
section .content2 {
  position: absolute;
  /*top: 50%;*/
  /*left: 50%;*/
  font-size: 5vw;
  letter-spacing: 2px;
  /*transform: translate(-50%, -50%);*/
}
h2 {
  letter-spacing: 1.8px;
}