Buttons in grid layout css

user_7661005 0
Viewed 6662

I want to achieve the following layout i drafted in word:

enter image description here

So I did some research and came to know about the css grid layout, which i think would be best suited for the layout i plan on achieving above.

However, in my HTML page, the grid doesn't seemed to be working nor showing up as right now its looking like:

enter image description here

Would appreciate some help on this.

Here's the code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

.grid_container {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px;
    background-color: green;
    padding: 10px;
}

.small_btn {
    width: 100px;
    height: 50px;
}

.big_btn {
    width: 200px;
    height: 50px;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "avc_label_style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div class = "grid-container">
        <div class="grid-item">
          <button type = "button" id = "b1" class = "small_btn">Button1</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b2" class = "small_btn">Button2</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b3" class = "small_btn">Button3</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b4" class = "small_btn">Button4</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b5" class = "big_btn">Button5</button>
        </div>
      </div>
    </div>
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. Vivamus malesuada sapien quis elit semper, tristique elementum lectus condimentum.         </p>
    </div>
  </div>
</body>
</html>

css-grid css html
2 Answers

I used the grid-template-area rule to construct the objects the way you want:

.grid-container {
    display: grid;
    grid-template-areas: "button1 button2 button3"
                         "button4 button5 button5";
    grid-gap: 5px;
}

Also, each object (button) needs to be assigned a template:

.grid-item:nth-child(1) {
    grid-area: button1;
}

Also, you need to replace the fixed width of the buttons with 100%.

Was it necessary?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

.grid_container {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px;
    background-color: green;
    padding: 10px;
}

.small_btn {
    width: 100%;
    height: 50px;
}

.big_btn {
    width: 100%;
    height: 50px;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}

.grid-container {
    display: grid;
    grid-template-areas: "button1 button2 button3"
                         "button4 button5 button5";
    grid-gap: 5px;
}

.grid-item:nth-child(1) {
    grid-area: button1;
}

.grid-item:nth-child(2) {
    grid-area: button2;
}

.grid-item:nth-child(3) {
    grid-area: button3;
}

.grid-item:nth-child(4) {
    grid-area: button4;
}

.grid-item:nth-child(5) {
    grid-area: button5;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "avc_label_style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div class = "grid-container">
        <div class="grid-item">
          <button type = "button" id = "b1" class = "small_btn">Button1</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b2" class = "small_btn">Button2</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b3" class = "small_btn">Button3</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b4" class = "small_btn">Button4</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b5" class = "big_btn">Button5</button>
        </div>
      </div>
    </div>
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. Vivamus malesuada sapien quis elit semper, tristique elementum lectus condimentum.         </p>
    </div>
  </div>
</body>
</html>

Second solution using grid-column:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

.grid_container {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px;
    background-color: green;
    padding: 10px;
}

.small_btn {
    width: 100%;
    height: 50px;
}

.big_btn {
    width: 100%;
    height: 50px;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.grid-item:nth-child(5) {
    grid-column: 2 / span 2;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "avc_label_style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div class = "grid-container">
        <div class="grid-item">
          <button type = "button" id = "b1" class = "small_btn">Button1</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b2" class = "small_btn">Button2</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b3" class = "small_btn">Button3</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b4" class = "small_btn">Button4</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b5" class = "big_btn">Button5</button>
        </div>
      </div>
    </div>
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. Vivamus malesuada sapien quis elit semper, tristique elementum lectus condimentum.         </p>
    </div>
  </div>
</body>
</html>

user_135734440

Run this: `

<body>
      <div class = "grid-container">
        <div class="grid-item">
          <button type = "button" id = "b1" class = "small_btn">Button1</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b2" class = "small_btn">Button2</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b3" class = "small_btn">Button3</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b4" class = "small_btn">Button4</button>
        </div>
        <div class="grid-item b5">
          <button type = "button" id = "b5" class = "big_btn">Button5</button>
        </div>
      </div>
</body>

`

and style as:

`

.grid-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.grid-item{
  border: 2px solid black;
  padding: 30px;
  display: grid;
  place-items: center;
}
.b5{
  grid-column: 2/4;
}

`

user_141902390
Related