/* Base styles that apply to all devices */
.grid-container {
display: grid;
grid-gap: 1rem; /* This sets both the row and column gap */
}
/* Desktop-specific styles */
@media (min-width: 769px) { /* Adjust this value to your desktop breakpoint */
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Only apply the two-column layout on desktop */
}
.grid-container > .grid-item:nth-child(even) {
margin-top: 1rem; /* Only apply the margin offset on desktop */
}
}
/* Tablet and below specific styles */
@media (max-width: 768px) { /* Adjust this value to your tablet breakpoint */
.grid-container {
display: flex;
flex-direction: column; /* Stack items vertically */
}
.grid-container > .grid-item {
margin-top: 0; /* Reset margin for tablet and below */
}
.grid-container > .grid-item:nth-child(even) {
margin-top: 0; /* Ensure even items don't have margin on tablet */
}
}
In the dynamic world of web development, Webflow emerges as a frontrunner, redefining design freedom and functionality. But let's see how they match up with other website building tools.
.avif)