Resolved: How can I align a text-box next to a grid item?

In this post, we will see how to resolve How can I align a text-box next to a grid item?

Question:

Im learning more about grids in CSS. I have created a grid of four images and a textbox that describes the images. I cannot get the items to align next to each other. I want to have the textbox on the left side and the images on the right but I cannot get it to align next to each other. The images are slightly on the right but it’s sitting low. How can i get the grid images to align next to the textbox? (text on left and images on right)

#grid-container{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
#image{
    height: 300px;
    width: 350px;
}
.grid-item{
    width: 300px;
    height: 300px;
    display: flex;
}
.grid-item:nth-of-type(1){
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transform: translate(-50px,100px);
}
.grid-item:nth-of-type(2){
    grid-column: 1 / 2;
    grid-row: 2 / 2;
    transform: translate(-0,100px);
}
.grid-item:nth-of-type(3){
    grid-column: 2 / 2;
    grid-row: 1 / 2;
    transform: translate(-10px, -0px);
}
.grid-item:nth-of-type(4){
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    transform: translate(-5px,0px);
}
.overview{
    display: flex;
    width: 30%;
}
.overview-text{
    text-align: center;
}
.flex-box{
    display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>How to layer and overlap elements</h1>
    </header>
    <div class="overview">
        <div class="overview-text">
            <h1>Overview Text</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                    culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                    culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                    culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
    <div class="flex-box">
        <div id = "grid-container">
            <div class="grid-item">
                <img id = "image" src = "Image">
            </div>
            <div class="grid-item">
                <img id = "image" src = "Image/">
            </div>
            <div class="grid-item">
                <img id = "image" src = "Image/">
            </div>
            <div class="grid-item">
                <img id = "image" src = "Image">
            </div> 
        </div>
    </div>
</body>
</html>

Best Answer:

You should use the .flex-box as the container of both text and grid images. I also add margin-left: 100px to the grid since it has transform that overflows:

#grid-container {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-left: 100px;
}

#image {
  height: 300px;
  width: 350px;
}

.grid-item {
  width: 300px;
  height: 300px;
  display: flex;
}

.grid-item:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transform: translate(-50px, 100px);
}

.grid-item:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 2;
  transform: translate(-0, 100px);
}

.grid-item:nth-of-type(3) {
  grid-column: 2 / 2;
  grid-row: 1 / 2;
  transform: translate(-10px, -0px);
}

.grid-item:nth-of-type(4) {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
  transform: translate(-5px, 0px);
}

.overview {
  display: flex;
  width: 30%;
}

.overview-text {
  text-align: center;
}

.flex-box {
  display: flex;
  justify-content: center;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
</head>

<body>
  <header>
    <h1>How to layer and overlap elements</h1>
  </header>
  <div class="flex-box">
    <div class="overview">
      <div class="overview-text">
        <h1>Overview Text</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    <div>
      <div id="grid-container">
        <div class="grid-item">
          <img id="image" src="Image">
        </div>
        <div class="grid-item">
          <img id="image" src="Image/">
        </div>
        <div class="grid-item">
          <img id="image" src="Image/">
        </div>
        <div class="grid-item">
          <img id="image" src="Image">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Question:

Best Answer:

Related