Reputation: 43

How can i place divs next to each other in grid format

Hello as shown in the picture there are 2 divs which i want to place next to each other . They are box1 and box2 respectivly . In the pic they both have martial arts system and a name . How can i do this? . Below is the html and css code i have used.

* {
  margin: 0px;
  padding: 0px;
  justify-content: center
}

.navlist {
  list-style: none;
  display: flex;
  padding: 0px;
  margin: 0px auto;
  width: 477px;
  top: 45px;
  position: relative;
}

.bar {
  height: 100px;
  justify-content: center;
  box-shadow: 0px 2px 5px;
  display: grid;
  grid-template-columns: 100px auto 80px;
  height: 100px;
  width: 100%
}

.link1 {
  margin-left: 30px;
  text-decoration: none;
  color: black;
  font-size: 20px
}

.signin {
  background: blue;
  height: 35px;
  width: 100px;
  left: 50px;
  position: relative;
  text-align: center;
  font-size: 18px;
  border-radius: 15%;
  top: 20px
}

.sign {
  top: 15%;
  position: relative;
  color: white;
  text-decoration: none
}

.pic {
  position: relative;
  left: -100px;
  width: 100%;
  height: 75%
}

.introbox {
  width: 700px;
  height: 200px;
  background-image: url('wal.jpg');
  opacity: 0.75;
  left: 25%;
  position: relative;
  background-position: center;
  top: 10px;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0px 2px 5px;
}

.new {
  font-size: 30px;
  left: 20%;
  position: relative;
  font-weight: 400
}

.box1 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 20%;
  top: 2%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}

.rank {
  font-weight: 100
}

.box1:hover {}

.lnlink {
  text-decoration: none;
  color: black
}

.box2 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 40%;
  top: 1%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>

<body>
  <div class="bar">
    <img src="background.png" class="pic">
    <nav>
      <ul class="navlist">
        <li><a href='#' class="link1">Search</a></li>
        <li><a href='#' class="link1">Browse</a></li>
        <li><a href='#' class="link1">Tags</a></li>
        <li><a href='#' class="link1">Filter</a></li>
        <li><a href='#' class="link1">Dev</a></li>
      </ul>
    </nav>
    <div class="signin"><a href="#" class='sign'>Sign In</a></div>
  </div>
  <div class="introbox">
    <h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
    <p2>Your fictional stories hub</p2>
    <br>
    <p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author
      is updated instantly on the Light Novel Pub and notification service is provided to the readers.

    </p3>

    Start reading now to explore this mysterious fantasy world.
  </div>
  <br>
  <br>
  <div class="release">
    <div class="title1">
      <h3 class="new">New Ongoing Release</h3>
    </div>
    <div class="lightnovel1">
      <div class="box1">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1<p2>
        </div>
      </div>
      <div class="box2">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink2">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1<p2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Answers (3)

Yong

Reputation: 1685

If you want to really utilize the grid format you should use display: grid;. Especially in your case where there'll be multiple items that you will be adding to your div. Setting grid-template-columns will set how many columns you can have in a row and it'll automatically add the next item that exceeded your number of columns in the next row. You can read more about grid in this link.

PS. I read my light novels on that website too lol!

* {
  margin: 0px;
  padding: 0px;
  justify-content: center
}

.navlist {
  list-style: none;
  display: flex;
  padding: 0px;
  margin: 0px auto;
  width: 477px;
  top: 45px;
  position: relative;
}

.bar {
  height: 100px;
  justify-content: center;
  box-shadow: 0px 2px 5px;
  display: grid;
  grid-template-columns: 100px auto 80px;
  height: 100px;
  width: 100%
}

.link1 {
  margin-left: 30px;
  text-decoration: none;
  color: black;
  font-size: 20px
}

.signin {
  background: blue;
  height: 35px;
  width: 100px;
  left: 50px;
  position: relative;
  text-align: center;
  font-size: 18px;
  border-radius: 15%;
  top: 20px
}

.sign {
  top: 15%;
  position: relative;
  color: white;
  text-decoration: none
}

.pic {
  position: relative;
  left: -100px;
  width: 100%;
  height: 75%
}

.introbox {
  width: 700px;
  height: 200px;
  background-image: url('wal.jpg');
  opacity: 0.75;
  left: 25%;
  position: relative;
  background-position: center;
  top: 10px;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0px 2px 5px;
}

.new {
  font-size: 30px;
  left: 20%;
  position: relative;
  font-weight: 400
}

.box1 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 20%;
  top: 2%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}

.rank {
  font-weight: 100
}

.box1:hover {}

.lnlink {
  text-decoration: none;
  color: black
}

.box2 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 40%;
  top: 1%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}

.lightnovel1{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>

<body>
  <div class="bar">
    <img src="background.png" class="pic">
    <nav>
      <ul class="navlist">
        <li><a href='#' class="link1">Search</a></li>
        <li><a href='#' class="link1">Browse</a></li>
        <li><a href='#' class="link1">Tags</a></li>
        <li><a href='#' class="link1">Filter</a></li>
        <li><a href='#' class="link1">Dev</a></li>
      </ul>
    </nav>
    <div class="signin"><a href="#" class='sign'>Sign In</a></div>
  </div>
  <div class="introbox">
    <h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
    <p2>Your fictional stories hub</p2>
    <br>
    <p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author
      is updated instantly on the Light Novel Pub and notification service is provided to the readers.

    </p3>

    Start reading now to explore this mysterious fantasy world.
  </div>
  <br>
  <br>
  <div class="release">
    <div class="title1">
      <h3 class="new">New Ongoing Release</h3>
    </div>
    <div class="lightnovel1">
      <div class="box1">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1
            <p2>
        </div>
      </div>
      <div class="box2">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink2">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1
            <p2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Jello

Reputation: 414

There are many ways to achieve it, consider using flex. You need to adjust to position, top, left of box1 and box2 to put where you want to put.

.lightnovel1 {
  display: flex;
  justify-content: flex-start;
}

Upvotes: 0

Arezou Saremian

Reputation: 508

* {
  margin: 0px;
  padding: 0px;
  justify-content: center
}

.navlist {
  list-style: none;
  display: flex;
  padding: 0px;
  margin: 0px auto;
  width: 477px;
  top: 45px;
  position: relative;
}

.bar {
  height: 100px;
  justify-content: center;
  box-shadow: 0px 2px 5px;
  display: grid;
  grid-template-columns: 100px auto 80px;
  height: 100px;
  width: 100%
}

.link1 {
  margin-left: 30px;
  text-decoration: none;
  color: black;
  font-size: 20px
}

.signin {
  background: blue;
  height: 35px;
  width: 100px;
  left: 50px;
  position: relative;
  text-align: center;
  font-size: 18px;
  border-radius: 15%;
  top: 20px
}

.sign {
  top: 15%;
  position: relative;
  color: white;
  text-decoration: none
}

.pic {
  position: relative;
  left: -100px;
  width: 100%;
  height: 75%
}

.introbox {
  width: 700px;
  height: 200px;
  background-image: url('wal.jpg');
  opacity: 0.75;
  left: 25%;
  position: relative;
  background-position: center;
  top: 10px;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0px 2px 5px;
}

.new {
  font-size: 30px;
  left: 20%;
  position: relative;
  font-weight: 400
}

.box1 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 20%;
  top: 2%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}

.rank {
  font-weight: 100
}

.box1:hover {}

.lnlink {
  text-decoration: none;
  color: black
}

.box2 {
  height: 250px;
  width: 200px;
  background: green;
  position: relative;
  left: 40%;
  top: 1%;
  display: grid;
  font-size: 20px;
  font-weight: 600
}
.lightnovel1{
  display: flex;
  flex-direction:row;
  justify-content:flex-start;

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>

<body>
  <div class="bar">
    <img src="background.png" class="pic">
    <nav>
      <ul class="navlist">
        <li><a href='#' class="link1">Search</a></li>
        <li><a href='#' class="link1">Browse</a></li>
        <li><a href='#' class="link1">Tags</a></li>
        <li><a href='#' class="link1">Filter</a></li>
        <li><a href='#' class="link1">Dev</a></li>
      </ul>
    </nav>
    <div class="signin"><a href="#" class='sign'>Sign In</a></div>
  </div>
  <div class="introbox">
    <h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
    <p2>Your fictional stories hub</p2>
    <br>
    <p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author
      is updated instantly on the Light Novel Pub and notification service is provided to the readers.

    </p3>

    Start reading now to explore this mysterious fantasy world.
  </div>
  <br>
  <br>
  <div class="release">
    <div class="title1">
      <h3 class="new">New Ongoing Release</h3>
    </div>
    <div class="lightnovel1">
      <div class="box1">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1<p2>
        </div>
      </div>
      <div class="box2">
        <img src="martialart.jpg" class="pic2">
        <a href="#" class="lnlink2">Martial Art System </a>
        <div class="rank">
          <p2> Rank 1<p2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

How can i place divs next to each other in grid format

Answers (3)

Related Questions