Creating a grid layout with a row of buttons

Question

Creating a grid layout with a row of buttons

I'm currently working on aligning buttons within a div to achieve the desired effect shown in the image below. My goal is to have all buttons centered on the page, with the small circles placed in a separate div as they are initially invisible and it's easier to adjust their parameters. Here is my progress so far:
https://i.sstatic.net/jeQmG.png

Here is what I am aiming for:
https://i.sstatic.net/5RA2m.png

.guzik {
    background-color: white;
    display: inline-block;
    padding: 0 2px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid black;
    margin: 20px;
}
.guzik1 {
    display: inline-block;
    vertical-align: middle;
    background-color:white;
    padding: 0 0px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid black;
    font-size: 9px;
}

<div>
      <input name="1" type="button" class="guzik1" id="k 0+1" />
      <input name="2" type="button" class="guzik1" id="k 0+2" />
      <input name="3" type="button" class="guzik1" id="k 0+3" />
      <input name="4" type="button" class="guzik1" id="k 0+4" />
      <input name="Color1" type="button" class="guzik" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="guzik" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="guzik" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="guzik" id="0+4" onclick="changeColor1(id)" />
</div>

html css

Answer 1

Answer №1

You might want to consider utilizing display: flex combined with a <br> tag for better layout:

.container {
  display: flex;
}

.header {
  margin-left: 80px;
  width: 200px;
  font-family: sans-serif;
  color: blue;
  text-align: center;
}

h3 { color: grey }

.small-pegs {
  padding-top: 15px
}

.big-pegs {}

.button {
  background-color: white;
  display: inline-block;
  padding: 0px 2px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid black;
  margin: 20px;
}

.button-small {
  display: inline-block;
  vertical-align: middle;
  background-color: white;
  padding: 0 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 9px;
}

<div id="board">
  <div class="header">
    <h1>Mastermind</h1>
    <h3>Organize Code</h3>
  </div>
  <div class="container">
    <div class="small-pegs">
      <input name="1" type="button" class="button-small" id="k 0+1" />
      <input name="2" type="button" class="button-small" id="k 0+2" /><br/>
      <input name="3" type="button" class="button-small" id="k 0+3" />
      <input name="4" type="button" class="button-small" id="k 0+4" />
    </div>
    <div class="big-pegs">
      <input name="Color1" type="button" class="button" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="button" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="button" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="button" id="0+4" onclick="changeColor1(id)" />
    </div>
  </div>
  <div class="container">
    <div class="small-pegs">
      <input name="1" type="button" class="button-small" id="k 0+1" />
      <input name="2" type="button" class="button-small" id="k 0+2" /><br/>
      <input name="3" type="button" class="button-small" id="k 0+3" />
      <input name="4" type="button" class="button-small" id="k 0+4" />
    </div>
    <div class="big-pegs">
      <input name="Color1" type="button" class="button" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="button" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="button" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="button" id="0+4" onclick="changeColor1(id)" />
    </div>
  </div>
</div>

Answer 2

You might want to consider utilizing display: flex combined with a <br> tag for better layout:

.container {
  display: flex;
}

.header {
  margin-left: 80px;
  width: 200px;
  font-family: sans-serif;
  color: blue;
  text-align: center;
}

h3 { color: grey }

.small-pegs {
  padding-top: 15px
}

.big-pegs {}

.button {
  background-color: white;
  display: inline-block;
  padding: 0px 2px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid black;
  margin: 20px;
}

.button-small {
  display: inline-block;
  vertical-align: middle;
  background-color: white;
  padding: 0 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 9px;
}

<div id="board">
  <div class="header">
    <h1>Mastermind</h1>
    <h3>Organize Code</h3>
  </div>
  <div class="container">
    <div class="small-pegs">
      <input name="1" type="button" class="button-small" id="k 0+1" />
      <input name="2" type="button" class="button-small" id="k 0+2" /><br/>
      <input name="3" type="button" class="button-small" id="k 0+3" />
      <input name="4" type="button" class="button-small" id="k 0+4" />
    </div>
    <div class="big-pegs">
      <input name="Color1" type="button" class="button" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="button" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="button" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="button" id="0+4" onclick="changeColor1(id)" />
    </div>
  </div>
  <div class="container">
    <div class="small-pegs">
      <input name="1" type="button" class="button-small" id="k 0+1" />
      <input name="2" type="button" class="button-small" id="k 0+2" /><br/>
      <input name="3" type="button" class="button-small" id="k 0+3" />
      <input name="4" type="button" class="button-small" id="k 0+4" />
    </div>
    <div class="big-pegs">
      <input name="Color1" type="button" class="button" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="button" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="button" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="button" id="0+4" onclick="changeColor1(id)" />
    </div>
  </div>
</div>

Answer 3

Answer №2

If you're looking to achieve a specific layout using css grid, here's a straightforward example.

Utilizing the fraction unit in css grid allows you to divide your grid into sections. For a more in-depth explanation of grid functionality, check out this resource.

Enhanced with a title and control section:

.wrapper {
  height: 400px;
  width: 500px;
  display: grid;
  grid-template-rows: .25fr .25fr .25fr .25fr;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
...

<div class="wrapper">
  <div class="title">
    <h1>MasterMind</h1>
    <p>Guess the Code</p>
  </div>
  ...
</div>

I hope this sample code is useful for you.

Answer 4

If you're looking to achieve a specific layout using css grid, here's a straightforward example.

Utilizing the fraction unit in css grid allows you to divide your grid into sections. For a more in-depth explanation of grid functionality, check out this resource.

Enhanced with a title and control section:

.wrapper {
  height: 400px;
  width: 500px;
  display: grid;
  grid-template-rows: .25fr .25fr .25fr .25fr;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
...

<div class="wrapper">
  <div class="title">
    <h1>MasterMind</h1>
    <p>Guess the Code</p>
  </div>
  ...
</div>

I hope this sample code is useful for you.

Answer 5

Answer №3

Utilizing a grid layout can help you achieve 4 small boxes within one large box, and then another set of 4 in a second row. As a beginner myself, I believe the solution provided below effectively addresses the task at hand.

.gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 400px;
}

.smoolgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.smoolgrid button {
  border-radius: 50%;
  height: fit-content;
}

.gridbox button {
  border-radius: 50%;
}

<div class="gridbox">
  <div class="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

<div class="gridbox">
  <div class="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

This approach may place 4 small boxes within one of the 5 big grid slots. To resemble your example more closely, adjustments in size and max width can be made.

#gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#smoolgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

button {
  border-radius: 50%;
  height: 250px;
}

<div id="gridbox">
  <div id="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

Answer 6

Utilizing a grid layout can help you achieve 4 small boxes within one large box, and then another set of 4 in a second row. As a beginner myself, I believe the solution provided below effectively addresses the task at hand.

.gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 400px;
}

.smoolgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.smoolgrid button {
  border-radius: 50%;
  height: fit-content;
}

.gridbox button {
  border-radius: 50%;
}

<div class="gridbox">
  <div class="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

<div class="gridbox">
  <div class="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

This approach may place 4 small boxes within one of the 5 big grid slots. To resemble your example more closely, adjustments in size and max width can be made.

#gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#smoolgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

button {
  border-radius: 50%;
  height: 250px;
}

<div id="gridbox">
  <div id="smoolgrid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

Answer 7

Answer №4

If you want to create stylish buttons using CSS and Bootstrap, this code snippet can help you achieve that:

.button {
  background-color: #428bca;
  border: 1px solid #357ebd;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #3071a9;
}

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="text-center">
  <button class="btn btn-primary button">Click Me</button>
</div>

Answer 8

If you want to create stylish buttons using CSS and Bootstrap, this code snippet can help you achieve that:

.button {
  background-color: #428bca;
  border: 1px solid #357ebd;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #3071a9;
}

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="text-center">
  <button class="btn btn-primary button">Click Me</button>
</div>

Creating a grid layout with a row of buttons

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty populating a table with JSON data in Angular without encountering any error messages

When using html-pdf-chrome to print to an A4 PDF, there appears to be a significant space below the A

Creating a moving background for a loading bar with HTML5 and Shadow DOM is currently underway

Experiencing a problem with JQuery Offset when a fixed position is applied to a

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

Utilizing personalized CSS for specific ioslides

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

Gradual disappearance of preloader as the page loads

Include content within the navigation bar of Bootstrap 3.3

Switching my Selenium code to HtmlUnit: A Step-by-Step Guide

Continuously updating C# HTML parsing

Embracing JQuery for Frontend Development with Node.js

Adjust the position of a child element to be just outside the boundaries of its parent element using CSS

What are the steps to make a counter-clockwise dial with jQuery Knob?

Prevent Bootstrap 4 from causing content to shift downwards when collapsing

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Using SVG files as properties in React from a data.js file

Hover over the image to trigger animation effects

Second word in the textbox receiving attention

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the