Creating flexible layouts with CSS grid that adjust dynamically based on the content

Question

Creating flexible layouts with CSS grid that adjust dynamically based on the content

I want to utilize CSS grid to create a unique table design. The layout can be described as follows (refer to the image for visualization): https://i.sstatic.net/vj8iF.jpg

Here's what I need: the header cell should have a size of 2x / 2y, while each header row's cell is x / 2y and each header column cell is 2x / y. The internal table cell size (highlighted in red) should be x / y.

All elements except for the Header cell need to be dynamic. For instance, the data could result in 7 rows and 3 columns.

The challenge lies in making this table fully dynamic. Here's my attempt for the header column:

grid-template-rows: repeat(auto-fill, 145px);

And for the header rows, I've included:

grid-template-columns: repeat(auto-fill, 145px);

Despite these settings, something seems to be missing. How can I ensure that the table adjusts dynamically based on the data provided and adheres to the specified cell size limitations?

html css html-table css-grid

Answer 1

Answer №1

Although this may not have much practical use, I decided to experiment out of curiosity:

The CSS variables x and y from your question are retained,
Modify the grid-template-columns similar to your approach but with an additional column width in the first column like
```
grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x))
```
,
Set the initial row positioning using
```
grid-template-rows: calc(var(--y) * 2)
```
,
Position the rows below the header using implicit grids - utilize grid-auto-rows: var(--y).

Check out the demo below:

:root {
  --y: 75px;
  --x: 75px;
}

.container {
  display: grid;
  grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x));
  grid-template-rows: calc(var(--y) * 2);
  grid-auto-rows: var(--y);
}

.container > div {
  border: 1px solid red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 2

Although this may not have much practical use, I decided to experiment out of curiosity:

The CSS variables x and y from your question are retained,
Modify the grid-template-columns similar to your approach but with an additional column width in the first column like
```
grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x))
```
,
Set the initial row positioning using
```
grid-template-rows: calc(var(--y) * 2)
```
,
Position the rows below the header using implicit grids - utilize grid-auto-rows: var(--y).

Check out the demo below:

:root {
  --y: 75px;
  --x: 75px;
}

.container {
  display: grid;
  grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x));
  grid-template-rows: calc(var(--y) * 2);
  grid-auto-rows: var(--y);
}

.container > div {
  border: 1px solid red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Creating flexible layouts with CSS grid that adjust dynamically based on the content

Answer №1

Similar questions

Why is there excessive whitespace appearing in Internet Explorer 9?

What is the best way to customize the Bootstrap CSS for an <a> element?

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

`Cannot locate the CSS file on my local server`

Adjust the size of the input field as text is being typed in

Is there a possibility of encountering problems when collapsing table rows versus individual cells?

html5 - Safari browser: Hover effects for rounded images

Hover function not functioning properly

Leveraging PHP to manipulate HTML elements

What is the best way to display the press down (:active) effect before releasing the finger?

Insert a percentage sign into a right-aligned text box

Why isn't the virtual directory in IIS 7 pointing to the root website?

Use Ajax to dynamically update the href attribute of an ID

In search of a solution to ensure equal width for all items in a 2x2 grid

Can a website trigger an alarm on a user's iPhone without their permission?

Ensure a button is automatically highlighted within an active class script

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

Exploration of jQuery Dropdown Menus

Issues with connecting static files in express.js

Is it possible to manipulate the originating hyperlink of a remote page to make it appear as if it originated from a different page?