I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve:
- On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections - the first section contains multiple input fields in a single column, while the second section has two columns with smaller input fields.
- On a larger screen (1024px or wider), I would like to have two columns side by side, each containing one of the two sections. The first section should be narrower than the second. The input fields in the first section should be displayed in two columns, while the ones in the second section should be in three columns.
I hope this explanation makes sense!
Currently, my implementation sort of works but both sections have the same width. This causes the second section to "jump up" very late when the screen gets wider. For example, at 800px browser width, there is a lot of empty space to the right of the first section even though the second section could fit next to it.
Here is the code I have so far:
.surrounding-div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 50%), max(600px, 50%)));
};
.first-section {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
grid-column-gap: 1rem;
}
.second-section {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
grid-column-gap: 1rem;
}
I'm not sure if my approach is ideal since I'm still new to working with grids. I'm unsure if grid is the best solution for this layout.
If possible, I would like to achieve this without using Media Queries.