DEV Community

Mr.Python_34
Mr.Python_34

Posted on

CSS grid behaving differently when inheriting from another template.

#ask

base.html (Template I am inheriting from) 

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>




            .banner-image {
                border-radius: 50%;
                position: absolute;
                bottom: 20px;
                left: 0px;

            }

            .banner-container {
                position: relative;
                padding-bottom: 175px;
                background-color: red;
                width: 100%;
            }

            .main-banner-text {
                position: absolute;
                width: 100%;
                text-align: center;
                top: 15px;
            }


            .login-text {
                position: absolute;
                bottom: 5px;
                right: 10px;
                line-height: 5px;

            }

            .login-btn {
                top: 0px;
            }

            .nav-button {
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .cart-button {
                position: absolute;
                top: 0px;
                right: 0px;
            }




        </style>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <!-- CSS -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500&display=swap">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css">
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/media-queries.css">

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
        {% load static %}
        <title>{% block title %}Base Page{% endblock %}</title>

    </head>
    <body>
        <div class="banner-container">

            <div class="nav-button">
                <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
                    <button onclick="w3_close()" class="w3-bar-item w3-large">Close x</button>
                    <a href="/" class="w3-bar-item w3-button">Home</a>
                    <a href="/accounts"class="w3-bar-item w3-button">Accounts</a>
                </div>
                <button class="w3-button w3-xxxlarge" onclick="w3_open()">☰</button>
            </div>
            <div class="main-banner-text">
                <h1>Jumpin' Jacks Luxery Auto Shop</h1>
            </div>

                <img src="{% static 'store/base/base-pic.jpg' %}" alt="Image Not Found" style="width: 12%; height: 50%; position: absolute; bottom: 15px; left: 50px; border-radius: 50%;">

            <div class="login-text">
                {% if user.is_authenticated %}
                    <a href="/logout"><button type="button" class="btn btn-warning">Logout</button></a>
                {% else %}
                <a href="/login"><button type="button" class="btn btn-dark">Login</button></a>
                <a href="/register"><button type="button" class="btn btn-dark">Register</button></a>

                {% endif %}
            </div>


        </div>

        {% block content %}

        {% endblock %}
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
         <!-- Javascript -->
        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/jquery-migrate-3.0.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.waypoints.min.js"></script>
        <script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
        <script src="assets/js/scripts.js"></script>

        <script>
            function w3_open() {
              document.getElementById("mySidebar").style.display = "block";
            }

            function w3_close() {
              document.getElementById("mySidebar").style.display = "none";
            }
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

base.html

Image description

CSS grid works perfectly fine (all boxes are the same size and take up the full width of the screen) with no template inheritance as shown:

home.html

Image description

home.html 

<!DOCTYPE html>
<html lang="en">
    <head>

        <style>

            .homepage-container {
                padding-bottom: 100%;
                background-color: black;
                border: 5px solid blue;
            }

            .grid-container {
                display: grid;
               grid-template-columns: repeat(3, auto);
               border: 5px solid green;
               color: white;
               justify-items: center;
               text-align: center;
            }



            .header {
                border-style: solid;
                border-color: white;
                grid-column: span 3;

            }

            .second-header {
                grid-column: span 3;
                border-style: solid;
                border-color: white;

            }



            .col-1 {
                border-style: solid;
                border-color: white;

            }

            .col-2 {
                border-style: solid;
                border-color: white;
            }

            .col-3 {
                border-style: solid;
                border-color: white;
            }


        </style>

        {% load static %}
        {% block title %}Welcome{% endblock %}

    </head>
    <body>

        {% block content %}
            <div class="homepage-container">
               <div class="grid-container">
                   <div class="header">
                        <h1>Best Sellers</h1>
                   </div>
                   <div class="col-1">
                        <a href="/view/{{best_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                        {{best_seller.name}}
                   </div>
                   <div class="col-2">
                        <a href="/view/{{second_seller.name}}"><img src="{% static 'store/view/' %}{{second_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                        {{second_seller.name}}
                   </div>
                   <div class="col-3">
                        <a href="/view/{{third_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                        {{third_seller.name}}
                   </div>
                   <div class="second-header">
                        <h1>More Stock ! </h1>
                   </div>
                </div>
            </div>
        {% endblock %}

    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

However when I inherit from 'base.html' the grid boxes start to change sizes as shown (Only one line of code is added):

home.html

Image description

home.html

`<!DOCTYPE html>

    <style>

        .homepage-container {
            padding-bottom: 100%;
            background-color: black;
            border: 5px solid blue;
        }

        .grid-container {
            display: grid;
           grid-template-columns: repeat(3, auto);
           border: 5px solid green;
           color: white;
           justify-items: center;
           text-align: center;
        }



        .header {
            border-style: solid;
            border-color: white;
            grid-column: span 3;

        }

        .second-header {
            grid-column: span 3;
            border-style: solid;
            border-color: white;

        }



        .col-1 {
            border-style: solid;
            border-color: white;

        }

        .col-2 {
            border-style: solid;
            border-color: white;
        }

        .col-3 {
            border-style: solid;
            border-color: white;
        }


    </style>
    {% extends 'base.html' %}
    {% load static %}
    {% block title %}Welcome{% endblock %}

</head>
<body>

    {% block content %}
        <div class="homepage-container">
           <div class="grid-container">
               <div class="header">
                    <h1>Best Sellers</h1>
               </div>
               <div class="col-1">
                    <a href="/view/{{best_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                    {{best_seller.name}}
               </div>
               <div class="col-2">
                    <a href="/view/{{second_seller.name}}"><img src="{% static 'store/view/' %}{{second_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                    {{second_seller.name}}
               </div>
               <div class="col-3">
                    <a href="/view/{{third_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
                    {{third_seller.name}}
               </div>
               <div class="second-header">
                    <h1>More Stock ! </h1>
               </div>
            </div>
        </div>
    {% endblock %}

</body>
Enter fullscreen mode Exit fullscreen mode

`

Side note I am using Django framework.

So if anyone knows why this is happening please let me know !

Top comments (0)

Read next

fady_nabil10 profile image

Discovering the Latest Features of AWS CloudFront: Enhancing Performance and Security

Fady Nabil -

be11amer profile image

Understanding the Java Memory Model: Heap and Stack Explained

Bellamer -

engrsakib profile image

Understanding Node.js: A Complete Guide

Md Nazmus Sakib -

onurhandtr profile image

JavaScript IIFE: A Complete Guide to Immediately Invoked Function Expressions

Onurhan -