How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

Question

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked.

Here is what I have in mind:

[ link1 ] [ link2 ] [ link3 ]

[ link4 ] [ link4 ] [ link4 ]

When clicked, it will turn into:

[ link1 ] [ link2 ] [ link3 ]

[---------link2 content---------]

[ link4 ] [ link4 ] [ link4 ]

Essentially, clicking on link2 will reveal content related to link2 in the grid below it.

I initially tried to achieve this in a semantic way by grouping the link and content in a dl tag...

<div style="display: flex">

    <dl>
        <dt><a href="#accordion1">Link1</a></dt>
        <dd>Content 1</dd>
    </dl>

    <dl>
        <dt><a href="#accordion2">Link2</a></dt>
        <dd>Content 2</dd>
    </dl>

    <dl>
        <dt><a href="#accordion3">Link3</a></dt>
        <dd>Content 3</dd>
    </dl>

    ..etc

</div>

My concern is whether I will be able to make the corresponding dd element full width due to the adjacent dl blocks.

If that's the case, should I consider breaking up the layout into a series of divs (even if it makes it less semantic)?

Any assistance would be greatly appreciated.

Thank you in advance,

css flexbox css-grid

Answer 1

Answer №1

Utilizing CSS Grid for this purpose will require a modification in the HTML structure.

Below is an example that utilizes hover effects, but it can be easily adjusted to work with clicks as well.

In essence, the "description" is initially hidden and then positioned on the lower row, causing the other elements to adjust accordingly due to the dense value in the auto-flow property.

.container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 1em;
}

.item,
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.item {
  background: lightblue;
  transition: background 0.25s ease;
}

.item:hover {
  background: rebeccapurple;
}

.item:hover+.desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="desc">Description 1</div>
  <div class="item">2</div>
  <div class="desc">Description 2</div>
  <div class="item">3</div>
  <div class="desc">Description 3</div>
  <div class="item">4</div>
  <div class="desc">Description 4</div>
  <div class="item">5</div>
  <div class="desc">Description 5</div>
  <div class="item">6</div>
  <div class="desc">Description 6</div>

</div>

Answer 2

Utilizing CSS Grid for this purpose will require a modification in the HTML structure.

Below is an example that utilizes hover effects, but it can be easily adjusted to work with clicks as well.

In essence, the "description" is initially hidden and then positioned on the lower row, causing the other elements to adjust accordingly due to the dense value in the auto-flow property.

.container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 1em;
}

.item,
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.item {
  background: lightblue;
  transition: background 0.25s ease;
}

.item:hover {
  background: rebeccapurple;
}

.item:hover+.desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="desc">Description 1</div>
  <div class="item">2</div>
  <div class="desc">Description 2</div>
  <div class="item">3</div>
  <div class="desc">Description 3</div>
  <div class="item">4</div>
  <div class="desc">Description 4</div>
  <div class="item">5</div>
  <div class="desc">Description 5</div>
  <div class="item">6</div>
  <div class="desc">Description 6</div>

</div>

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

Answer №1

Similar questions

Steps for adding an onclick function to a collection of div elements

Step-by-step guide to creating a dynamic button that not only changes its value but also

What is the best way to create this using html and css?

javascript include new attribute adjustment

What's the best way to implement a font family in a React component?

Unable to place an absolutely positioned Div within relative parent containers

The upper margin is ineffective

Encountering issues with implementing useStyles in Material-UI components

Issue with SVG marker not functioning properly when hovered over

Struggling to get custom button hover styles to work in React?

What is the proper way to specify the background image path in CSS?

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Can the minimum length be automatically filled between two elements?

Adding up rows and columns using HTML

Using a background image in a React component

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

The applied style of NextUI Components may be inconsistent, appearing to not apply in certain instances even though it does work

When using NextJs, running the commands 'npm build' and 'npm start' can sometimes cause style inconsistencies

Ionic - Landscape Mode Causing Alignment Distortion

"Discover the secrets of flipping a webpage just like turning the pages of