I have implemented a 2x2 grid in my HTML and CSS code:
<div className="gameScreen">
<GameTable
seats={seats}
/>
<ChatBox socket={socket} username={username} />
<InfoTable numPlayers={numPlayers} seats={seats} timer={false}/>
<GameCommands gameMasterSpeech={gameMasterSpeech}/>
</div>
.gameScreen {
display: grid;
height: 100%;
width: 100%;
grid-template-columns: 3fr 2fr;
grid-template-rows: 4fr 1fr;
}
This setup creates a 2x2 grid where:
- the first grid is 3fr wide and 4fr tall
- the second grid is 2fr wide and 4fr tall
- the third grid is 3fr wide and 1fr tall
- the fourth grid is 2fr wide and 1fr tall.
I am looking to adjust the height of the second grid to be about 3fr, and the height of the fourth grid to be 2fr. How can I make this adjustment?