Organize objects neatly in a grid formation

I have a .test div with

grid-template-columns: auto auto auto;
. The column width is set to vary based on the element width, and I also used justify-content: start; to align the columns to the left. I chose to use auto instead of 1fr to prevent the columns from stretching to their maximum width.

However, I am facing an issue with aligning the columns neatly like a table does. In the example below, the second .target paragraph in the second .test div is longer than the first one. My goal is to make all other column widths follow the longest one.

P.S.: I prefer not to use tables. While I can utilize JavaScript to find the longest element and adjust the widths accordingly, I am exploring if there is an easier CSS-only solution available.

p {
  margin: 0;
}

.test {
    column-gap: 30px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
}

p:nth-child(2) {
    position: relative;
    width: 120px;
}

.flex {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}

For comparison, here's how it would look in a table:

td:nth-child(2) {
    position: relative;
  width: 120px;
}

.flex {
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

In this table representation, even though the first column "Hellooo" is longer in the second row, all second columns are aligned together.

Answer №1

Revamp your HTML structure by consolidating all elements into a single grid layout and utilize inline-grid:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>
.test {
  display: inline-grid;
}

Remember to style the second element of each row using a more intricate nth-child selector:

p:nth-child(3n + 2) {}

Give it a try:

.test {
  display: inline-grid;
}

p:nth-child(3n + 2) {
  position: relative;
  width: 120px;
}


/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}
<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

Answer №2

To achieve a table-like behavior for grid columns, it's important to place all items within a single grid container instead of having them in two separate ones:

<div class="test">
    <p class="target">Hello</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
    <p class="target">Hellooo</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
</div>

If you want to set the width of the second element in each row using grid layout, you can simply specify the width like this:

grid-template-columns: auto 120px auto;

Removing the p:nth-child(2) selector would cause the .flex element to be positioned absolutely against the grid rather than the p element, disrupting the layout.

However, you can eliminate absolute positioning altogether while maintaining the layout integrity by applying overflow properties to all grid items as shown below:

.test > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Here is the updated and cleaner code:

p {
  margin: 0;
}

.test {
  column-gap: 30px;
  display: grid;
  grid-template-columns: auto 120px auto;
  justify-content: start;
}

.test > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</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

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to ach ...

Displaying images in a horizontal row instead of a vertical column when using ng-repeat

I am currently using ng-repeat to showcase a series of images. While I believe this may be related to a CSS matter, I am uncertain. <div ng-repeat="hex in hexRow track by hex.id"> <img ng-src="{{hex.img}}"/> </div> How can I arrange ...

Ways to align page title text at the center of the banner image without using flexbox or grid layout?

Seeking advice on how to vertically center the banner text in the middle of the banner image for a CSS-only psd conversion project. Any ideas on achieving this goal without utilizing flexbox or grid? header { background-image: url(../assets/main-ban ...

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?

I have created a fiddle to demonstrate my question. Essentially, I am looking to create a scrollable container with padding at the top and bottom that remains visible during scrolling, ensuring there is always a consistent distance from the edge to the con ...

Dropdown sidebar with collapsible sections

I am looking to create a unique navigation system for my website. I have a standard HTML list with menu items that will serve as anchor links on a long-scrolling page. My idea is to design it as a minimal vertical side navigation bar, where each item initi ...

Having trouble getting a background image to show up in a table cell when using CSS clear:both?

I am working on an email and I want an image to only show up on mobile devices. To achieve this, I created an empty <td> with a span inside where I styled the span to have a background image. However, my issue is that I want the image to occupy an e ...

I am looking for a highly specialized jQuery selector that fits my exact requirements

Hello everyone, I'm encountering an issue with a jQuery selector. Here is the HTML code snippet: <div id="Id_Province_chzn"> <a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"> <span> + this.default_tex ...

Options in Joomla Back-end Plugin

Just started diving into Joomla programming and I managed to create a plugin that functions perfectly. However, there's one small issue that's been bothering me all day. The configuration options in the back-end are shifted by a 180px left margin ...

Position navbar contents at the top of the screen

As I delve into learning Bootstrap4, I have come across the following snippet of HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

What is the best way to apply CSS hover effects to specific cells within a table?

Is there a way to selectively apply CSS hover effects to only specific cells in a table? And can I disable it on the cells where I don't want it? td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-styl ...

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

I'm facing an issue with the left navigation bar's design. Specifically, I'd like the grey color of the bar to extend vertically across the entire page. Currently, the gray bar ends at the viewport's edge. Is there a way to make the ba ...

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

Expand the width of the image to fill the entire screen

I have been working on trying to insert an image into my header element. However, when I test it using Live Server, the image doesn't fully fill the width of the container. Update: The dimensions of the image are 899.875 x 600. Below is my CSS and H ...

Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling: .condition-table { background-color: #e1f5fe70; } The styling seems to work fine so far. However, when I added this additional CSS: .co ...

Tips for organizing CSS styles into common and unique statements

Is there a way to apply the same background style but different font styles to two elements without duplicating the style statement in the header part? ...

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...