Блог

Главная - Вопросы по программированию - Как правильно скрыть ячейки в CSS-сетке?

Как правильно скрыть ячейки в CSS-сетке?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я новичок в CSS. Я пытаюсь создать красивую сетку, которая изменяется в зависимости от пользовательского ввода. Вот мой подход к этому:

  1. Создайте «самую большую» сетку и установите все, что будет скрыто.
  2. Когда пользовательский ввод изменится, отобразите ячейки, которые требуется отобразить. Также соответствующим образом измените поля.

Я заметил, что когда я следую этой логике, мои ячейки каким-то образом перемещаются в определенном направлении. Это почти похоже на то, что скрытые ячейки все еще каким-то образом занимают место. Есть ли способ избежать этого?

Вот моя попытка:

 'use strict'

let topBtn = document.querySelector("#top-btn");
let greyBar = document.querySelector("#grey-bar");
let topBtnClicked = false;
let gridSelectionBtns = document.querySelectorAll(".grid-selection-btn");
let mediaContainer = document.querySelector("#media-container");
let mediaCells = document.querySelectorAll(".media-cell");

function onTopBtnMouseEvent(ev) {
  if (ev.type === "click") {
    topBtn.style.opacity = "0.7";
    greyBar.style.opacity = "0.7";
    topBtnClicked = true;
  } else if (ev.type === "mouseover") {
    topBtn.style.opacity = "0.7";
  } else if (ev.type === "mouseout") {
    if (!topBtnClicked) {
      topBtn.style.opacity = "0";
    }
  }
}

function onTopBarMouseEvent(ev) {
  if (ev.type === "mouseover") {

  } else if (ev.type === "mouseout") {
    if (topBtnClicked amp;amp; !(greyBar.contains(ev.relatedTarget) || (ev.relatedTarget === topBtn))) {
      topBtnClicked = false;
      topBtn.style.opacity = "0";
      greyBar.style.opacity = "0";
    }
  }
}

function enableMediaCell(cellNumber, isEnable) {
  let cell = mediaCells[cellNumber];

  if (isEnable) {
    cell.style.visibility = "visible";
    cell.style.margin = "25px";
    cell.style.gridGap = "10px";

  } else {
    cell.style.visibility = "hidden";
    cell.style.margin = "0";
    cell.style.gridGap = "0";

  }
}

function gridSelectedHandler(type) {
  if (!topBtnClicked) {
    return;
  }

  switch (type) {
    case 0:
      mediaContainer.style.opacity = "1";

      enableMediaCell(0, true);
      for (let i = 1; i < mediaCells.length;   i) {
        enableMediaCell(i, false);
      }

      mediaContainer.style.gridTemplateColumns = "repeat(1, 1fr)";
      mediaContainer.style.gridTemplateRows = "repeat(1, 1fr)";

      break;
    case 1:
      mediaContainer.style.opacity = "1";

      enableMediaCell(0, true);
      enableMediaCell(1, true);

      for (let i = 2; i < mediaCells.length;   i) {
        enableMediaCell(i, false);
      }

      mediaContainer.style.gridTemplateColumns = "repeat(2, 1fr)";
      mediaContainer.style.gridTemplateRows = "repeat(1, 1fr)";

      break;
    case 2:
      mediaContainer.style.opacity = "1";

      for (let i = 0; i < 4;   i) {
        enableMediaCell(i, true);
      }

      for (let i = 4; i < mediaCells.length;   i) {
        enableMediaCell(i, false);
      }

      mediaContainer.style.gridTemplateColumns = "repeat(2, 1fr)";
      mediaContainer.style.gridTemplateRows = "repeat(2, 1fr)";

      break;
    case 3:
      mediaContainer.style.opacity = "1";

      for (let i = 0; i < 6;   i) {
        enableMediaCell(i, true);
      }

      for (let i = 6; i < mediaCells.length;   i) {
        enableMediaCell(i, false);
      }

      mediaContainer.style.gridTemplateColumns = "repeat(3, 1fr)";
      mediaContainer.style.gridTemplateRows = "repeat(2, 1fr)";

      break;
    case 4:
      mediaContainer.style.opacity = "1";

      for (let i = 0; i < mediaCells.length;   i) {
        enableMediaCell(i, true);
      }

      mediaContainer.style.gridTemplateColumns = "repeat(3, 1fr)";
      mediaContainer.style.gridTemplateRows = "repeat(3, 1fr)";

      break;
    default:
      break;
  }
}

for (let i = 0; i < gridSelectionBtns.length;   i) {
  gridSelectionBtns[i].addEventListener("click", function() {
    gridSelectedHandler(i)
  })
}

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    mediaContainer.style.opacity = "0"
  }
});

topBtn.onmouseover = topBtn.onmouseout = topBtn.onclick = onTopBtnMouseEvent;
greyBar.onmouseover = greyBar.onmouseout = greyBar.onclick = onTopBarMouseEvent;  
 body {
  background-image: url("../media/gopher_background.jpg");
  background-size: cover;
}

#top-btn {
  width: 100%;
  height: 25px;
  opacity: 0;
  background-image: url("../media/down-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
}

#grey-bar {
  background-color: GhostWhite;
  width: 100%;
  height: 50px;
  opacity: 0;
  display: flex;
  justify-content: center;
}

.grid-selection-btn {
  width: 5%;
  height: 100%;
  margin: 0 1%;
}

#media-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 0;
  min-height: 85vh;
  background-color: lightgray;
}

.media-cell {
  background-color: lightgray;
  visibility: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  margin: 25px;
}

.youtube-btn {
  /*background-image: url("../media/youtube-logo.png");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.reddit-btn {
  /*background-image: url("../media/reddit-icon.png");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.twitter-btn {
  /*background-image: url("../media/twitter.png");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.insta-btn {
  /*background-image: url("../media/insta-logo.png");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}  
 <button id="top-btn"></button>
<div id="grey-bar">
  <button class="grid-selection-btn">1</button>
  <button class="grid-selection-btn">2</button>
  <button class="grid-selection-btn">3</button>
  <button class="grid-selection-btn">4</button>
  <button class="grid-selection-btn">5</button>
</div>

<div id="media-container">
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>

  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>

  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
  <div class="media-cell">
    <button class="youtube-btn"></button>
    <button class="reddit-btn"></button>
    <button class="insta-btn"></button>
    <button class="twitter-btn"></button>
  </div>
</div>

Я изучаю веб-разработку уже около 2 недель. Я понимаю, что мой код может быть не лучшей практикой. Я бы тоже хотел получить некоторые отзывы по этому поводу.

Комментарии:

1. вы хотите, чтобы ширина сетки менялась в зависимости от количества ячеек?

Ответ №1:

Вы правильно заметили, скрытые элементы все еще занимают место. Это относится к visibility: hidden … чтобы элемент не был видимым или вообще не занимал места на странице, вы хотите display: none . Значение по умолчанию для атрибута отображения div равно block , поэтому вы можете использовать это, чтобы сделать ячейку видимой в скрипте.