Как в CSS писать стили исходя из ширины себя как @container?

Question

[Сергей Кореневский]

Нужно изменять стили блока в зависимости от своей ширины.
Использовать ширину родителя не очень удобно, так как родитель является display: GRID с сложной сеткой.
Надо было родителю назначить стиль container-type: inline-size;
Но так как родитель является сеткой, то отталкиватся от ширины родителя совсем не удобно, надо отталкиватся от ширины ячейки сетки, а так возможно? Как быть?

Comments

[Антон Антон]

очевидное решение положить внутрь див и указывать стили уже ему не предлагать? как-то так: https://play.tailwindcss.com/e84lmQRJ8U

[Ankhena]

Да, очевидное это обертка.
Неочевидное можно подумать, если знать полностью задачу.
Опять же, у некоторых свойств заданных в процентах, расчет идет от ширины родителя. А в данном случае от ширины ячейки.

[Сергей Кореневский]

Ankhena,
DIV содержит в себе список DIV`ов,
этот DIV в зависимости от ширины должен иметь либо flex-direction: rows либо flex-direction: colls
чтобы дочерние дивы выстраивались либо по колонкам, либо по строкам.

Решил это таким образом, что я дочерним DIV`ам назначил ширину 100% при flex-direction: colls; flex-wrap: wrap;
и дочерние дивы переносились по строкам, как будто бы я flex-direction: менял.

Но вообще странно, единственный раз решил попробывать контейнеры, и сразу попал в засаду. Странно что в спецификации об этом не подумали.

для меня вообще странно то что в синтаксис не придумали

selector.class:media(width < 500px){
}
selector.class:container(width < 500px){
}

лучше бы такой синтаксис бы придумали, чтобы учитывал свою ширину.

Но в общем спасибо.

[Ankhena]

Сергей Кореневский,

Но вообще странно, единственный раз решил попробывать контейнеры, и сразу попал в засаду. Странно что в спецификации об этом не подумали.

Они-то подумали.
Теперь попробуйте подумать, что делать браузеру, если ему сказать что-то вроде: если ширина блока 500, то сделай ширину этого же блока 300. Это совсем утрировано, но на ширину влияет не только width.

[Ankhena]

Решил это таким образом

Да, так проще, чем менять поток.

Только это:
Во-первых, не решение исходного вопроса.
Во-вторых, в описании задачи нет информации о сетке грида и, возможно, других обстоятельствах влияющих на неё (тех же media). В идеале с песочницей.

Answer 1

[Сергей Кореневский]

DIV содержит в себе список DIV`ов,
этот DIV в зависимости от ширины должен иметь либо flex-direction: rows либо flex-direction: colls
чтобы дочерние DIV`ы выстраивались либо по колонкам, либо по строкам.

Решил это таким образом, что я дочерним DIV`ам назначил ширину 100% при flex-direction: colls; flex-wrap: wrap;
и дочерние DIV`ы переносились по строкам, как будто бы я flex-direction: менял.

Comments

[Антон Антон]

если исходная задача была в замене направления, можно было решить её так: https://play.tailwindcss.com/k5EMShNDxd

а вообще хоть grid-template-areas менять можно

[Сергей Кореневский]

Антон Антон, наоборот было

<div class="grid grid-cols-2 @lg:grid-flow-col @lg:grid-rows-2">
  <div class="flex-1 bg-blue-200">something</div>
  <div class="@container flex w-full flex-1">
    <div>item 1</div>
    <div class="bg-red-200">item 2</div>
    <div>item 3</div>
    <div>item 4</div>
  </div>
</div>

и нужно было при изменении ширины контейнера чтобы всё содержимое было либо в строчку либо в колонку.

[Антон Антон]

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