Information arranged in a matrix

Question

Information arranged in a matrix

Hey everyone, I have all these input boxes and I want to organize them in a 3x4 or 4x3 grid layout instead of having them stacked on top of each other. I've tried using grid and other code but it just doesn't seem to work. Do you have any suggestions on how to solve this? Keep in mind that this is for a chrome extension popup so there may be limitations due to the maximum width.

html {
  background-color: #d63031
}

input {
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

<html>

<head>

  <script src="script.js"></script>
</head>

<body style="width:600px">
  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  /* Additional input fields go here */
  
  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
</body>

</html>

html css google-chrome-extension

Answer 1

Answer №1

For grids to function properly, it is not necessary to have maximum width. Below is a functional solution, although your desired outcome was not explicitly stated. Please inform me if I have overlooked any details.

To create a grid system, you must have a container and place the input boxes you wish to group within a div, as shown below:

<div id="grid">
    <div id="grid-1">
        <p>Name: <input placeholder="Name and Surname" id="name"></p>
        <p>Email: <input placeholder="Email" id="email"></p>
        <p>Telephone: <input placeholder="Telephone" id="phone"></p>
    </div>
    <div id="grid-2">
        <p>Address: <input placeholder="Address" id="address"></p>
        <p>City: <input placeholder="City" id="city"></p>
        <p>Postal Code: <input placeholder="Postal Code" id="postcode"></p>
    </div>
    <div id="grid-3">
        <p>Card Number: <input placeholder="Card Number" id="cardnumb"></p>
        <p>Country Code: <input placeholder="IT,UK,..." id="country"></p>
        <p>Card Type: <input placeholder="american_express, master, visa, solo, paypal" id="cardtype"></p>
    </div>
    <div id="grid-4">
        <p>Expiration Month: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="month"></p>
        <p>Expiration Year: <input placeholder="2018,2019..." id="year"></p>
        <p>CVV: <input id="cvv"></p>
    </div>
</div>

On the CSS side, specify a display grid for the container and indicate the column in which each div containing the input boxes should be placed.

#grid {
    display: grid;
    grid-gap: 20px;
}

#grid-1 {
    grid-column: 1/2;
}

#grid-2 {
    grid-column: 2/3;
}

#grid-3 {
    grid-column: 3/4;
}

#grid-4 {
    grid-column: 4/5;
}

This arrangement will neatly group and align all your input boxes side by side. I hope this explanation proves helpful :)

Answer 2

For grids to function properly, it is not necessary to have maximum width. Below is a functional solution, although your desired outcome was not explicitly stated. Please inform me if I have overlooked any details.

To create a grid system, you must have a container and place the input boxes you wish to group within a div, as shown below:

<div id="grid">
    <div id="grid-1">
        <p>Name: <input placeholder="Name and Surname" id="name"></p>
        <p>Email: <input placeholder="Email" id="email"></p>
        <p>Telephone: <input placeholder="Telephone" id="phone"></p>
    </div>
    <div id="grid-2">
        <p>Address: <input placeholder="Address" id="address"></p>
        <p>City: <input placeholder="City" id="city"></p>
        <p>Postal Code: <input placeholder="Postal Code" id="postcode"></p>
    </div>
    <div id="grid-3">
        <p>Card Number: <input placeholder="Card Number" id="cardnumb"></p>
        <p>Country Code: <input placeholder="IT,UK,..." id="country"></p>
        <p>Card Type: <input placeholder="american_express, master, visa, solo, paypal" id="cardtype"></p>
    </div>
    <div id="grid-4">
        <p>Expiration Month: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="month"></p>
        <p>Expiration Year: <input placeholder="2018,2019..." id="year"></p>
        <p>CVV: <input id="cvv"></p>
    </div>
</div>

On the CSS side, specify a display grid for the container and indicate the column in which each div containing the input boxes should be placed.

#grid {
    display: grid;
    grid-gap: 20px;
}

#grid-1 {
    grid-column: 1/2;
}

#grid-2 {
    grid-column: 2/3;
}

#grid-3 {
    grid-column: 3/4;
}

#grid-4 {
    grid-column: 4/5;
}

This arrangement will neatly group and align all your input boxes side by side. I hope this explanation proves helpful :)

Answer 3

Answer №2

It seems like there might be some confusion in your question, but one solution could be to utilize flexbox. Keeping your existing code as is, you can wrap your inputs in a div with a class of .input-group.

I would also suggest adding labels to your inputs and changing the use of <p> to <div>

html {
  background-color: #d63031
}

body{
  width: 600px;
}

.input-group{
  display: flex;
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
}

.input-group p{
  width: 33.3%;
  padding: 0 10px;
}

.input-group input{
  width: 100%;
}

input {
  display: block;
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <div class="input-group">
    <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
    <p>mail: <input placeholder="Email" id="mail"></p>
    <p>tel: <input placeholder="Telephone" id="tel"></p>
  </div>
  <div class="input-group">
    <p>addr: <input placeholder="Address" id="indirizzo"></p>
    <p>City: <input placeholder="City" id="citta"></p>
    <p>PostCod: <input placeholder="PosteCode" id="pc"></p>
  </div>
  <div class="input-group">
    <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
    <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
    <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  </div>
  <div class="input-group">
    <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
    <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
    <p>Cvv: <input id="cvv"></p>
  </div>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>

Answer 4

It seems like there might be some confusion in your question, but one solution could be to utilize flexbox. Keeping your existing code as is, you can wrap your inputs in a div with a class of .input-group.

I would also suggest adding labels to your inputs and changing the use of <p> to <div>

html {
  background-color: #d63031
}

body{
  width: 600px;
}

.input-group{
  display: flex;
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
}

.input-group p{
  width: 33.3%;
  padding: 0 10px;
}

.input-group input{
  width: 100%;
}

input {
  display: block;
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <div class="input-group">
    <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
    <p>mail: <input placeholder="Email" id="mail"></p>
    <p>tel: <input placeholder="Telephone" id="tel"></p>
  </div>
  <div class="input-group">
    <p>addr: <input placeholder="Address" id="indirizzo"></p>
    <p>City: <input placeholder="City" id="citta"></p>
    <p>PostCod: <input placeholder="PosteCode" id="pc"></p>
  </div>
  <div class="input-group">
    <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
    <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
    <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  </div>
  <div class="input-group">
    <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
    <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
    <p>Cvv: <input id="cvv"></p>
  </div>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>

Answer 5

Answer №3

After analyzing the provided CSS, it can be determined that the first column will have a fixed width of 200px while the second column will take up 1fr (“one fraction”) of the remaining available space.

html {
  background-color: #d63031
}
body{display: grid;
grid-template-columns: 200px 1fr;}

input {
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

<html>

<head>

  <script src="script.js"></script>
</head>

<body style="width:600px">
  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
  <p>mail: <input placeholder="Email" id="mail"></p>
  <p>tel: <input placeholder="Telephone" id="tel"></p>
  <p>addr: <input placeholder="Address" id="indirizzo"></p>
  <p>City: <input placeholder="City" id="citta"></p>
  <p>PostCod: <input placeholder="PosteCode" id="pc"></p>

  <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
  <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
  <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
  <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
  <p>Cvv: <input id="cvv"></p>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
</body>

</html>

Answer 6

After analyzing the provided CSS, it can be determined that the first column will have a fixed width of 200px while the second column will take up 1fr (“one fraction”) of the remaining available space.

html {
  background-color: #d63031
}
body{display: grid;
grid-template-columns: 200px 1fr;}

input {
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

<html>

<head>

  <script src="script.js"></script>
</head>

<body style="width:600px">
  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
  <p>mail: <input placeholder="Email" id="mail"></p>
  <p>tel: <input placeholder="Telephone" id="tel"></p>
  <p>addr: <input placeholder="Address" id="indirizzo"></p>
  <p>City: <input placeholder="City" id="citta"></p>
  <p>PostCod: <input placeholder="PosteCode" id="pc"></p>

  <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
  <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
  <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
  <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
  <p>Cvv: <input id="cvv"></p>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
</body>

</html>

Information arranged in a matrix

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve information from ngResource (angularjs) based on the chosen item

Prevent the table cell width from expanding beyond the content size

Automatically adjust the top margin of the content section to accommodate a fixed header height

Crafting a personalized arrow for sorting headers in Angular Material

Having trouble with jQuery div height expansion not functioning properly?

spaces between sections with no padding or borders

Troubleshooting Angular modal fade not functioning

Arrange 4 divs (children) at each corner of the parent element

The separator falls short of spanning the entire width of the page

HTMLMediaElement does not have the setSinkId method

JavaScript code that allows users to select text on a website

It appears that the font in style.css is not being updated properly and seems to resemble

Utilize Bootstrap 4 to create a full screen desktop layout with columns that automatically adjust to

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

What is the best way to add a button over an image using Tailwind CSS in Next.js?

Why does React-Perfect-Scrollbar not work properly when the height of an element is not specified in pixels?

Locate the class identifier within the source SCSS document that is condensed into a unified CSS file when rendered in the browser

Canvas flood fill is having trouble reaching the edges

Secret message concealed within the depths of my Bootstrap 5 Side Navbar