Получение сетки-столбца, когда дальше вниз по дереву - PullRequest
Новая
       11

Получение сетки-столбца, когда дальше вниз по дереву

2 голосов
/ 05 июля 2019

Я интегрирую рабочий CSS-дизайн в мое угловое приложение. В дизайне довольно успешно используются grid и grid-column, примерно так: 

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 36px 20px;
    margin: 0;
}

.single {
    width: auto;
    border: 1px solid #000;
}

.double {
    grid-column: 2 / span 2;
    border: 1px solid #000;
}
<div class="grid">
    <div class="single">a</div>
    <div class="double">b</div>
</div>

Моя проблема в том, что это входит в приложение Angular, и по умолчанию Angular помещает на страницу теги для ваших компонентов, что прерывает HTML. Так что мой настоящий HTMl выглядит примерно так (диапазоны являются заполнителями для тегов, которые Angular вставляет для моих компонентов): 

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 36px 20px;
    margin: 0;
}

.single {
    width: auto;
    border: 1px solid #000;
}

.double {
    grid-column: 2 / span 2;
    border: 1px solid #000;
}
<div class="grid">
    <span>
        <span>
            <div class="single">a</div>
        </span>
    </span>
    <span>
        <span>
            <div class="double">b</div>
        </span>
    </span>
</div>

Теперь я знаю, что могу исправить это, выполнив настройки в angular, что я обычно и делаю - конвертирую компоненты в использование селекторов атрибутов, чтобы они могли напрямую переходить к обычному тегу, по возможности использую ng-контейнер, применяю правила host css и т.д ...

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

Есть ли способ указать свойствам CSS grid / grid-column эффективно игнорировать наличие некоторых дополнительных тегов в дереве DOM?

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

Примените стиль к непосредственным дочерним элементам, и он всегда будет работать с дополнительными тегами или без них: 

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 36px 20px;
  margin: 0;
}

.grid> :first-child {
  width: auto;
  border: 1px solid #000;
}

.grid> :last-child {
  grid-column: 2 / span 2;
  border: 1px solid #000;
}
<div class="grid">
  <span>
        <span>
            <div class="single">a</div>
        </span>
  </span>
  <span>
        <span>
            <div class="double">b</div>
        </span>
  </span>
</div>
<div class="grid">
  <div class="single">a</div>

  <div class="double">b</div>

</div>

Или используйте display:contents, если хотите игнорировать некоторые теги. Просто обратите внимание на поддержку: https://caniuse.com/#feat=css-display-contents

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 36px 20px;
  margin: 0;
}

.single {
  width: auto;
  border: 1px solid #000;
}

.double {
  grid-column: 2 / span 2;
  border: 1px solid #000;
}
.grid span {
  display:contents;
}
<div class="grid">
  <span>
        <span>
            <div class="single">a</div>
        </span>
  </span>
  <span>
        <span>
            <div class="double">b</div>
        </span>
  </span>
</div>
<div class="grid">
  <div class="single">a</div>

  <div class="double">b</div>

</div>
0 голосов
/ 05 июля 2019

Вы можете попытаться использовать атрибут grid-area, чтобы лучше контролировать, какие элементы считаются частями сетки.

Вот скрипка, которую вы можете попробовать

...