"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

I'm facing an issue with organizing choices and matches in columns using grid CSS. Currently, the match column is overlapping with the choice column.

Here is how it is coded at the moment:

.grid{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.grid>div{
  padding:12px;
  margin:0;
  color:#fff;
  background:#222;
}

.choice{
  grid-column-start: 1;
}
.match{
  grid-column-start:2;
  grid-row-start:1;
}
<div class="grid">
 <div class="choice">Choice 1</div>
 <div class="choice">Choice 2</div>
 <div class="choice">Choice 3</div>
 <div class="match">Match 1</div>
 <div class="match">Match 2</div>
 <div class="match">Match 3</div>
</div>

If I remove grid-row-start, it shifts to the second line.
Please note that this is just a sample and the actual question involves a variable number of matches and columns.

htmlcsscss-grid

Answer №1

Insert the following CSS property: grid-auto-flow: dense

.grid{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap:12px;
}

.grid>div{
  padding:12px;
  margin:0;
  color:#fff;
  background:#222;
}

.choice{
  grid-column-start: 1;
}
.match{
  grid-column-start:2;
}
<div class="grid">
 <div class="choice">Choice 1</div>
 <div class="choice">Choice 2</div>
 <div class="choice">Choice 3</div>
 <div class="match">Match 1</div>
 <div class="match">Match 2</div>
 <div class="match">Match 3</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing a problem with Datatables where all columns are being grouped together in a single row

After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...

javascriptjqueryhtmldatatables

Having trouble with CSS margins behaving unexpectedly

Could someone please explain why I am unable to add margin-top/bottom or padding-top/bottom to this "a" tag? I am trying to center "Konoha" in the header box. html{ background-color: white } body{ width: 88.5%; height: 1200px; margin: 0 auto; borde ...

htmlcss

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

I have an image of an arrow inside a div. The div is positioned fixed in the bottom right corner of an extremely wide page. Is there a way to utilize jQuery to scroll the window 600px to the right each time the arrow is clicked? Also, can I detect when th ...

javascriptjqueryhtmlcssscroll

Each block in Svelte includes a unique shorthand attribute

I have a JSON variable that holds attributes in a specific structure: // This json variable defines the attributes for elements to be created let myElements = [ { attr1: "myAttr1", attr2: "myAttr2", }, { ...

javascripthtmlsvelte

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

htmlcss

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

Ways to automatically insert an icon within a textarea

While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am uns ...

cssimagehtmltextarea

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...

javascripthtmlcss

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

Eliminating the default inline style automatically

My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; whi ...

jqueryhtmlcssinline-styles

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...

htmlcssflexbox

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

Troubleshooting the malfunction of images in Node.js located outside the HTML path

Currently, I'm developing a user profile page using nodejs where users can view their avatars after logging in. Users are able to upload files to the uploads folder which is located outside the standard htmlpath. Here's an overview of my folder s ...

htmlnode.jsexpresspugrelative-path

Is it recommended to include the default declaration in the same stylesheet as the media queries?

In order to optimize my code structure, I placed the default declaration in the style.css file and kept all media queries separated in a stylesheet named enhanced.css. For instance, an example of a code snippet I have in the style.css looks like this: .b ...

cssmedia-queries

The aria-label attribute does not seem to be functioning properly in Chrome and Firefox when using NVDA screen

Within my code, I have a straightforward textbox element: <input type="text" aria-label="First Name" title="First Name" /> Upon hovering over the textbox, I am displaying the tooltip First Name. I attempted to utilize both aria-label and aria-labe ...

htmlaccessibilitywai-arianvda

"Incorporating date and time information into the database

I am attempting to set up an automatic SMS system that sends a reminder 24 hours before our residents' appointments. My challenge lies in extracting the date and time from the datetime row in my MySQL database. While I could create an input field, my ...

phphtmlmysqljscript

Mastering the Art of Defining SVG Gradients in a Page-wide CSS File

On my HTML page, I have implemented a JavaScript code that dynamically generates SVG elements and inserts them into the HTML page. Currently, all the styling attributes such as fill colors are specified in the CSS of the entire webpage. This approach allo ...

htmlcsssvggradient