Как сделать CSS-сетку неотзывчивой? - PullRequest
Новая
       9

Как сделать CSS-сетку неотзывчивой?

4 голосов
/ 14 марта 2019

Я пытаюсь создать CSS-сетку, которая не будет изменять высоту / ширину при изменении элементов внутри нее.У меня есть следующий код: 

    <center><div class="grid-container">
        <div id="item1" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1
        </div>
        <div id="item2" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
        <div id="item3" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
        <div id="item4" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
        <div id="item5" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
        <div id="item6" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
        <div id="itemCenter">
            <div id="item1Center" style="display: none;" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1</div>
            <div id="item2Center" style="display: none;" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
            <div id="item3Center" style="display: none;" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
            <div id="item4Center" style="display: none;" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
            <div id="item5Center" style="display: none;" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
            <div id="item6Center" style="display: none;" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
            <div id="itemPlaceholder"><img src="img/placeholder.jpg"></div>
        </div>
    </div></center>

У меня есть следующий скрипт, который обрабатывает некоторые зависания: 

<script type="text/javascript">
        function makeVisible(id) {
            document.getElementById(id).style.display = 'block';
            document.getElementById('itemPlaceholder').style.display = 'none';
        }
        function makeInvisible(id) {
            document.getElementById(id).style.display = 'none';
            document.getElementById('itemPlaceholder').style.display = 'block';
        }
    </script>

И следующий CSS: 

#item1  { grid-area: topLeft; }
#item2  { grid-area: midLeft; }
#item1  { grid-area: botLeft; }
#item1  { grid-area: topRight; }
#item1  { grid-area: midRight; }
#item1  { grid-area: botRight; }
#itemCenter { grid-area: centered; }

.grid-container {
    display: grid;
    grid-template-areas: 
        'topLeft centered centered centered topRight'
        'midLeft centered centered centered midRight'
        'botLeft centered centered centered botRight';
    grid-gap: 5px;
    padding: 10px;
    width: 50vw;
    height: 50vh;
}

.grid-container > div {
    background-color: #E2D4B7;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

Моя проблемазаключается в том, что при наведении указателя мыши на элементы «item» и при изменении содержимого внутри div «mainItem» вся сетка адаптируется к нему и элементы меняются в размере.Я хочу сделать так, чтобы каждый элемент в сетке имел фиксированную высоту и ширину, как бы я это сделал?

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Ваши элементы сетки не остаются на месте, потому что у них нет определенной ширины на месте - вы можете заставить их принимать пропорциональные ширины , используя grid-template-columns: repeat(5, 1fr) и grid-template-rows: 1fr 1fr 1fr, чтобы ширина осталась прежней.

Также изменил изображение на фоновое изображение , чтобы оно оставалось внутри элемента сетки - см. Демонстрацию ниже: 

function makeVisible(id) {
  document.getElementById(id).style.display = 'block';
  document.getElementById('itemPlaceholder').style.display = 'none';
}

function makeInvisible(id) {
  document.getElementById(id).style.display = 'none';
  document.getElementById('itemPlaceholder').style.display = 'block';
}
#item1 {
  grid-area: topLeft;
}

#item2 {
  grid-area: midLeft;
}

#item1 {
  grid-area: botLeft;
}

#item1 {
  grid-area: topRight;
}

#item1 {
  grid-area: midRight;
}

#item1 {
  grid-area: botRight;
}

#itemCenter {
  grid-area: centered;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ADDED */
  grid-template-rows: 1fr 1fr 1fr; /* ADDED */
  grid-template-areas: 'topLeft centered centered centered topRight' 'midLeft centered centered centered midRight' 'botLeft centered centered centered botRight';
  grid-gap: 5px;
  padding: 10px;
  width: 50vw;
  height: 50vh;
}

.grid-container>div {
  background-color: #E2D4B7;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

#itemPlaceholder {  /* ADDED */
  background: url(https://via.placeholder.com/400) no-repeat;
  background-size: contain;
  background-position: center;
  height: 100%;
}
<center>
  <div class="grid-container">
    <div id="item1" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1
    </div>
    <div id="item2" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
    <div id="item3" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
    <div id="item4" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
    <div id="item5" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
    <div id="item6" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
    <div id="itemCenter">
      <div id="item1Center" style="display: none;" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1</div>
      <div id="item2Center" style="display: none;" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
      <div id="item3Center" style="display: none;" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
      <div id="item4Center" style="display: none;" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
      <div id="item5Center" style="display: none;" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
      <div id="item6Center" style="display: none;" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
      <div id="itemPlaceholder"></div>
    </div>
  </div>
</center>
0 голосов
/ 14 марта 2019

Вы можете использовать свойства grid-template-columns и grid-template-row, чтобы применить фиксированную ширину и высоту к сетке

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

...