Search code examples
htmlcsslayoutcss-gridelement

How to stack CSS elements horizontally for websites

I'm building my first real webpage and I'm trying to figure out how to stack the elements on the home screen correctly. I've read and tried similar posts but they don't seem to do what I need. Currently my homepage looks like this (ignore the list at the bottom of the page and subscribe/ login buttons. They are just part of the default theme): enter image description here

This was achieved using the following code: HTML:

<div class="desc-pic-parent">
    <div class="homepage-description">
        <div class="homepage-description-header">
            Hi! I'm Lewis Cooper
        </div>
        <div class="homepage-description-text">
            This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
        </div>
    </div>
    <div class="square-pretend-img"></div>
</div>

CSS:

@media (min-width: 1001px) {
    .disc-pic-parent {
        grid-column: 1 / span 3;
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 280px;
        border-top: 0;
    }


    .homepage-description{
        text-align: left;
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr;
        min-height: 280px;
        border-top: 0;
    }

    .homepage-description-header{
        font-size: 3rem;
        margin-top: 0;
    }

    .square-pretend-img{
        position: relative;
        height: 20rem;
        width: 20rem;
        background-color: #555;
        grid-column: 2 / span 2;
    }
}

My goal is to try and get it to look something like this sketch: what i want the webpage to look like

Solution

  • The idea of using a grid for the main layout is fine and will keep your text at a constant width even if it is too long, but you also have put a grid in your left hand box which isn't the layout your desired image shows. You have also given the img defined dimensions and yet defined column spans for the grid.

    This snippet just takes it that you want the img to have the given dimensions so removes the extra grid information.

    @media (min-width: 1001px) {
  .desc-pic-parent {
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
    border-top: 0;
  }
  .homepage-description {
    text-align: left;
    min-height: 280px;
    border-top: 0;
  }
  .homepage-description-header {
    font-size: 3rem;
    margin-top: 0;
  }
  .square-pretend-img {
    position: relative;
    height: 20rem;
    width: 20rem;
    background-color: #555;
  }
}
    <div class="desc-pic-parent">
  <div class="homepage-description">
    <div class="homepage-description-header">
      Hi! I'm Lewis Cooper
    </div>
    <div class="homepage-description-text">
      This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
    </div>
  </div>
  <div class="square-pretend-img"></div>
</div>

    NOTE: you probably want to take some of the styling out of the media query and have it there for all viewport dimensions.