Hello
How to do this and what is the best way as there can be multiple ways of doing this?
I am using grid in the basic webpage and I want to insert 4 boxes inside a existing row.
I what to have 2 columns and 2 rows, fixed height & width in a 2 x 2 grid.
The page resizes for cell, tablet and desktop ok.
Here is a link to the page: http://davidswebsite.com/test/basic_layout1.html
Its not possible how you are doing it at the moment.
Think about it, you are splitting row5 into 2 equal widths, and 2 rows then asking box1, box2, box3 and box4 to sit within the grid, taking up 1 grid square each BUT setting a width of 30% for each of the boxes will only consume 30% of the width of each grid square, so there is ALWAYS going to be the 70% space to the right of the boxes!
Your best option would be to wrap your 4 boxes in a seperate <div> and set its width to 60% then apply the grid to that 1fr 1f makes 30% so your boxes will sit side by side then try and control how they react/look as the screen gets narrow using media queries.
Also your footer is NOT within the container div so there is no need to apply any grid related css to it UNLESS you move it within the grid.
Hello
I did the following using Flex and Grid. I changed from a 2x2 pattern to in this case 4 across. When I resize the screen it will collapse to 1 column. No width is defined. The content will determine that. If I remove the following the footer will shrink to the width of 2 columns.
footer {
grid-column: span 3;
My test site: http://davidswebsite.com/test/basic_layout1.html
.boxwrapper {
display: flex;
}
@media (min-width: 768px) {
.row5 {
display: grid;
grid-column-start: 2;
}
}
@media (max-width: 480px) {
.boxwrapper {
display: grid;
width: 100%;
}
}.
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices