I am looking to create a Cartesian plane using Bootstrap 4 and Flex. The end goal is to achieve a layout similar to the image linked below:
https://i.sstatic.net/THmwV.jpg
The plane will consist of a 10x10 grid, with a row for the x labels and a column for the y labels.
Below is the code I currently have:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- code for the remaining rows goes here -->
</div>
Here is the CSS associated with this structure:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The current output can be viewed at the following link: https://i.sstatic.net/lU4JB.png
There are two main issues that I am facing:
- The 11th row should stretch to cover the entire last column;
- The grid items need to adapt their size based on the available space within the container.
How can I address these problems? Thank you!