<div class="container">
<h1>Сетка с отступом во второй колонке</h1>
<div class="grid-container">
<!-- Элементы сетки -->
<div class="grid-item">
<h2>Проект 1</h2>
</div>
<div class="grid-item">
<h2>Проект 2</h2>
</div>
<div class="grid-item">
<h2>Проект 3</h2>
</div>
<div class="grid-item">
<h2>Проект 4</h2>
</div>
<div class="grid-item">
<h2>Проект 5</h2>
</div>
<div class="grid-item">
<h2>Проект 6</h2>
</div>
</div>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
margin-bottom: 30px;
text-align: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: 20px;
}
.grid-item {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
min-height: 180px;
border: 1px solid red;
}
.grid-item:nth-child(2) {
margin-top: 80px;
}
.grid-item h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.