Breaking News: Grepper is joining You.com. Read the official announcement!

button grid css

Dionoh answered on September 1, 2022 Popularity 7/10 Helpfulness 1/10

answer button grid css

related button grid css

button grid css

Comment

* {
    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;
}

Popularity 7/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: button css grid

Link to this answer
Share Copy Link

Contributed on Sep 01 2022

Dionoh

0 Answers Avg Quality 2/10

Closely Related Answers

button grid css

Comment

<!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>
 Run code snippet

Popularity 9/10 Helpfulness 4/10 Language html

Source: stackoverflow.com

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Sep 01 2022

Dionoh

0 Answers Avg Quality 2/10

button grid css

Comment

/*Second Solution*/

* {
    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;
}

Popularity 8/10 Helpfulness 2/10 Language css

Source: stackoverflow.com

Tags: button css grid gr

Link to this answer
Share Copy Link

Contributed on Sep 01 2022

Dionoh

0 Answers Avg Quality 2/10

button grid css

Comment

<!-- Second Solution -->

<!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>
 Run code snippet

Popularity 7/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: button css grid g

Link to this answer
Share Copy Link

Contributed on Sep 01 2022

Dionoh

0 Answers Avg Quality 2/10

button grid css

Contents

More Related Answers

button grid css

Closely Related Answers

button grid css

button grid css

button grid css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.