@AnisBacha
Posted
Great work figuring out a solution!
For the Grid Layout, you can achieve the desired outcome by setting up 3 columns and 2 rows. Make sure the first card extends to the first column and spans 2 rows, and center it vertically. Apply the same method for the last card, ensuring it aligns with the last column. As for the second column, simply adjust the cards to their intended positions.
Here's a rough representation of the code:
.main__cards{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 1fr 1fr;
align-items: center; /* this will center the supervisor and the calculator cards */
}
.main__supervisor{
grid-column: 1/2;
grid-row: 1/3;
}
.main__calculator{
grid-column:3/4 ;
grid-row: 1/3;
}
.main__team-builder{
grid-column: 2/3;
grid-row: 1/2;
}
.main__karma{
grid-column: 2/3;
grid-row: 2/3;
}
Remember to adjust the class names to match your specific implementation. Let me know if you need further assistance with this.
Marked as helpful
@TonyAppiah
Posted
@AnisBacha
Thank you very much Anis for your help. I had a jaw dropping moment when I implemented your code.😂 The layout was simply achieved, whiles maintaining responsiveness! Shucks!!! Thanks again.
I do have a follow up question. How are you able to tell the number of columns and rows needed (using Grid of course), in order to achieve the desired outcome? This project for example.
@AnisBacha
Posted
@TonyAppiah Glad that Worked!
I think you should remember that you have the flexibility to position your cards in any way you like within the grid layout. This will aid you in determining the ideal number of columns and rows for your specific grid layout based on the actual design.
In this example, With the understanding that I can adjust the cards position in the grid layout as I want using grid-column, grid-row , align-items properties and others, I'll base my decision on the three visible columns and also the two visible rows from the design.
@TonyAppiah
Posted
@AnisBacha
Much appreciated Anis.
