Блог

#css #grid

#css #сетка

Вопрос:

 .box{
  border: .1vw solid;
  padding: 3vw;
}

.label{
  white-space: nowrap;
  overflow: hidden;
  font-size: 5vw;
}  

 <div *ngFor="let x of documents">
  <div class="box">
      <div class="label">
        Some ridiculously long text entered by the user
      </div>
  </div>
</div>  

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

1. Вы захотите поместить свой код непосредственно в свой пост, чтобы люди могли запускать его отсюда. Отредактируйте сообщение и нажмите Ctrl-M, и как это сделать, должно быть очевидно для вас.

2. Не знал, что это вариант. Спасибо.

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

Ответ №1:

 grid-template-rows:auto auto;
row-gap:3vw;
display: grid;
  

 grid-template-columns:auto auto;
column-gap:3vw;
display: grid;
  

 .content[_ngcontent-oux-c40] {
    padding: 3vw;
    grid-template-rows: auto auto;
    row-gap: 3vw;
    display: grid;
}
  

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

1. Можете ли вы попробовать это?

2. Я создал редактируемый stackblitz, который можно использовать, который не работает, и примечание для этого простого примера, grid-template-rows абсолютно не влияет, поскольку я использую структуру grid-template-row «по умолчанию», которая заключается в повторении и создании новой строки для каждого элемента в сетке.

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

4. Вы хотите, чтобы каждый элемент box имел пробел, затем добавьте стиль к .container[_ngcontent-mhn-c40]

5. Я хочу, чтобы поля оставались неизменными и имели только пространство между каждым из них.

Ответ №2:

   requireddocumentsname {
    font-family: var(--pcwidefontnormal2);
    font-size: 5vw;
    white-space: nowrap;
    color: var(--pcblue);
}

.iconandlabelcontainer{
    height: min-content;
    border: .1vw solid blue;
    font-size: 5vw;
    white-space: nowrap;
    overflow: hidden;
    padding: 3vw;
  
}

.iconandlabel{
    white-space: nowrap;
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    width: 400px;
   
}

.content{
    padding: 3vw;
    display: grid;
    row-gap: 30px;
    justify-content:center;
    margin: 0;
}
  

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

1. Если вы сделаете именно это, это моя проблема, я создал Stackblitz в своем вопросе, чтобы продемонстрировать. если вы добавляете display:grid к контенту, это не работает.

2. Хм, я пытался добавить этот CSS в stackblitz, и мне это не нравится, но также обновил stackblitz, чтобы он был более простым, и я просто хочу указать, что «содержимое» является родительским div. Я не знаю, что я точно понимаю, не возражаете ли вы разветвить его и добавить то, к чему вы стремитесь?

3. вот фрагмент, извините… Я просто пропустил, чтобы сохранить его в URL …. облом следуйте за мной

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

5. Блин, это было 11 лет назад, и до сих пор нет лучшего решения. Я даже попытался обернуть его за секунду div , но по какой-то причине это снова приводит к тому, что поля снова исчезают из области просмотра. Я перепробовал почти все приемы CSS без использования псевдоклассов или margin-top / bottom, но у меня ничего не получается.

Ответ №3:

 .box{
  border: .1vw solid;
  padding: 3vw;
  margin-top: 3vw;
}

.box:first-child {
  margin-top: 0;
}