Search code examples
cssflexboxbootstrap-4grid-layout

How to strech the grid items in a Cartesian plane made with Bootstrap4 and Flex?

I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:

enter image description here

The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.

Here you are my code:

<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>

    <!-- the same for the other 8 rows -->
</div>

And the associated css:

.p-2 {
    border: 1px solid lightgray;
}

.p-2:before {
    content:'';
    float:left;
    padding-top:100%;
}

The actual result is: enter image description here

I have two problems:

  1. the row number 11 should be stretched until the last column;
  2. the grid items should adapt their size according to the available space of the container.

How I can reach these goals? Thank you

Solution

  • You can use the Bootstrap grid like this...

    Demo: https://www.codeply.com/go/sQA6tvHiZh

    <div class="container text-center">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="row">

                <div class="col-1">y</div>
                <div class="col-11">
                    <div class="row">
                        <div class="col">1
                        </div>
                        <div class="col">2
                        </div>
                        <div class="col">3
                        </div>
                        <div class="col">4
                        </div>
                        <div class="col">5
                        </div>
                        <div class="col">6
                        </div>
                        <div class="col">7
                        </div>
                        <div class="col">8
                        </div>
                        <div class="col">9
                        </div>
                        <div class="col">10
                        </div>
                    </div>
                    <!--/row-->
                    9 more row ...

                    <div class="row">
                        <div class="col">x
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--container-->
</div>