Блог

Главная - Вопросы по программированию - CSS-сетка, Как изменить размер элементов списка, чтобы они всегда отображались 2.5

CSS-сетка, Как изменить размер элементов списка, чтобы они всегда отображались 2.5

#css #css-grid

Вопрос:

Используя сетку CSS, как я могу убедиться, что видны только 2 и половина серых квадратов, представленных элементами списка, даже при изменении размера окна.

По мере изменения размера окна я ожидаю, что серые квадраты будут становиться все больше и меньше, чтобы всегда отображалось только два с половиной квадрата.

Количество элементов списка будет динамичным, поэтому я никак не могу использовать количество элементов.

Просто для ясности на 2.5 я ожидаю, что два серых квадрата будут видны, а третий квадрат будет показан только наполовину, а другая половина и остальные квадраты не будут видны, потому что они будут находиться в области прокрутки.

  ul {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
}
li {
  display: inline-block;
  vertical-align: top;
  width: 130px;
  height: 130px;
  white-space: normal;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
} 
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
<ul/>

Ответ №1:

Добавить grid-auto-columns:calc((100% - 2*20px)*2/5); . Из ширины вы удаляете 2 промежутка, а затем умножаете на 2/5 (это противоположно 5/2=2.5 ).

 ul {
  --g:20px;
  display: grid;
  grid-gap: var(--g);
  grid-auto-flow: column;
  grid-auto-columns:calc((100% - 2*var(--g))*2/5);
  overflow-x: auto;
  cursor: grab;
  padding: 0;
  padding-left: 50px;
}

li {
  list-style:none;
  display:flex;
  white-space: normal;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  
  /* to illustrate the center */
  background:linear-gradient(red 0 0) center/2px 100% no-repeat grey; 
}

li::before {
  content:"";
  padding-top:100%;
} 
 <ul>
  <li id="about">Item 1</li>
  <li id="test">Item 2</li>
  <li id="big">Item 3</li>
  <li id="here">Item 4</li>
  <li id="there">Item 5</li>
  <li id="big">Item 6</li>
  <li id="small">Item 7</li>
  <li id="storm">Item 8</li>
  <ul/>

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

1. Отлично смотрится, как нам сохранить квадраты, квадраты и не позволить им превратиться в прямоугольники?

2. @Билл. должны ли они расти в высоту? Или они должны отдалиться друг от друга?

Ответ №2:

Попробуйте рассчитать ширину li s

calc((100vw - 50px) / 2.5 - 20px); 

 ul {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  padding: 0;
  padding-left: 50px;
}
li {
  display: inline-block;
  vertical-align: top;
  width: calc((100vw - 50px) / 2.5 - 20px);
  height: 130px;
  white-space: normal;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
} 
 <ul>
        <li id="about">Item 1</li>
        <li id="test">Item 2</li>
        <li id="big">Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 </li>
        <li id="here">Item 4</li>
        <li id="there">Item 5</li>
        <li id="big">Item 6</li>
        <li id="small">Item 7</li>
        <li id="storm">Item 8</li>
<ul/>
Метки: , ,