#html #css #grid
Вопрос:
Я пытаюсь понять, как создать такую сетку, в которой некоторые столбцы строк могут выходить на край экрана, но в то же время она соответствует выравниванию со всеми остальными блоками. Также все это должно складываться блок за блоком на мобильном телефоне. Я не могу понять, с чего мне следует начать… Был бы очень рад, если бы кто-нибудь указал мне на некоторые источники или подсказки, как этого достичь!
Всем спасибо и счастливой пятницы!
Ответ №1:
Вы можете использовать отрицательное margin значение для выравнивания этой сетки.
body { display: flex; justify-content: center; } .parent { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; width: 200px; overflow: visible; } p { border: 1px solid #000; margin: 0; } p:nth-child(7) { margin-left: -100%; } p:nth-child(4) { margin-right: -100%; } lt;div class="parent"gt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;pgt;Loremlt;/pgt; lt;/divgt; Комментарии:
1. Спасибо за идею! Это выглядит довольно хорошо, но я думаю, как я могу объединить его с некоторыми сетками css (например, загрузкой или любой другой), чтобы получить одинаковые позиционированные элементы по всему сайту? Возможно ли это сделать с помощью некоторых адаптивных сетевых систем?
2. Держу пари, что если вы поиграете с ним, то найдете решение с помощью
positionи » медиа-запросов 🙂