Предположительно, вы знаете, как создать мобильную версию и как использовать @media для различения экранов разных размеров.
Я не до конца понял, что вы имели в виду ", охватывают строки 1 и 2", но вам не нужно использовать сетку.Хорошие старомодные встроенные блоки прекрасно работают здесь.Ваше грубое приближение является грубым только потому, что ваши значения маржи приблизительно оценены, а не потому, что техника, которую вы используете, недостаточна, чтобы делать то, что вы хотите.
Вот что я сделал, чтобы расположить элементы .grid-element (и это выглядит довольно даже для меня; возможно, это достаточно близко к тому, что вы хотите для его точной настройки):
- Все элементы: верхнее поле 0, левое / правое поля 1%, нижнее поле 10 пикселей.
- Второй элемент (первый элемент в правом столбце): верхнее поле 50 пикселей.
- Все нечетные элементы, кроме первого: верхнее поле -50px.
Вы можете поэкспериментировать с различными значениями поля, чтобы увидеть эффект, который они оказывают.Но, по сути, как только вы установите их рядом, вы столкнете вторую.Это правильно позиционирует второй и первый элементы, но также удаляются все последующие элементы.Итак, мы хотим восстановить четные с отрицательным значением маржи.Однако мы не хотим поднимать первый, так как он никогда не сталкивался.Итак, мы исключаем его с помощью селектора nth-child(2n+3) (т.е. каждый второй элемент начинается с трех).Это эквивалентно использованию nth-child(odd):not(:first-child).
function fillGrid() {
const container = document.querySelector('.container');
const times = [...new Array(10)];
times.forEach(() => {
const element = document.createElement('div');
element.classList.add('grid-element');
container.appendChild(element);
});
}
fillGrid()
.container {
width: 60%;
margin: auto;
background: papayawhip;
padding-bottom: 60px;
}
.grid-element {
display: inline-block;
height: 50px;
background: green;
vertical-align: middle;
width: 48%;
margin: 0 1% 10px;
}
.grid-element:nth-child(2) {
margin-top: 60px;
}
.grid-element:nth-child(2n+3) {
margin-top: -60px;
}
<div class="container">
</div>
РЕДАКТИРОВАТЬ: Использование сетки CSS для получения того же результата
После нашего разговора в комментарияхЯ экспериментировал с position:grid, чтобы посмотреть, смогу ли я найти способ сделать это.Мне пришлось добавить строку javascript (или написать довольно громоздкую связку CSS), чтобы сделать это, но, похоже, это сработало.
Я просто установил высоту строки на 25%, а затем добавил строку в свой JavaScript, чтобы сделать каждую строку толщиной в две строки, и начал ее на одну строку ниже от предыдущего элемента.
function fillGrid() {
const container = document.querySelector('.container');
const times = [...new Array(10)];
times.forEach((e, index) => {
const element = document.createElement('div');
element.classList.add('grid-element');
//added the line below to size and position the elements
element.setAttribute("style", "grid-row-start: " + (index + 1) + "; grid-row-end: " + (index + 3) + ";");
element.textContent = index + 1; //also put a number in each box
container.appendChild(element);
});
}
fillGrid()
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 25px;
width: 60%;
margin: auto;
background: papayawhip;
}
.grid-element {
background: green;
color: white;
}
<div class="container">
</div>