What is the best grid template layout?

HTML-CSS
1

48
481382×723 167 KB

In the image I have two elements overlapping. One element is an image and the other is a block where the text is going to be included. I am trying to learn CSS grid but having difficulties to have elements overlap like the image I have uploaded. Are there any tutorials that are similar to this? I can’t find anything on YT or Codepen. Really want to learn more of the CSS grid templates.

CSS code

  .container {
        margin-top: 100px;
        display: grid;
    }

    .image {
        background: url(IMG/mechanical.jpeg);
        margin: 0;
        padding: 0;
        width: 70%;
        height: 90vh;
        background-position: center;
        background-size: cover;
        float: left;
        background-attachment: scroll;
        z-index: -1;
    }

    .text-block {
        background-color: #44A09F;
        height: 410px;
        width: 900px;
        top: 10%;
        float: right;
        z-index: 9000;
        margin-top: -500px;
        opacity: 0.7;
    }

    h1 {
        text-align: center;
        color: white;
        font-weight: bold;
    }

HTML

 <div class="container">
          
                <div class="flex">
                    <div class="image"></div>
                    <div class="text-block">
                        <h1>About us</h1>
                    </div>
                </div>
          
        </div>
3

Hey @rosstopherrr. Give this post a look, the original poster seems to be asking about exactly what you are trying to achieve here.

4

You give the grid however many rows and columns the layout needs and then tell the grid items what row/column to start and stop at (Layering items). It can be done in a number of ways.

Example
https://codepen.io/anon/pen/RzpLPq

https://gridbyexample.com/examples/