Is there a way of making a child in a grid layout stretch full width with CSS

Question

I'm trying to create the following grid layout which will reveal a child on click.

So,

[ link1 ] [ link2 ] [ link3 ]

[ link4 ] [ link4 ] [ link4 ]

Will become,

[ link1 ] [ link2 ] [ link3 ]

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

[ link4 ] [ link4 ] [ link4 ]

Ie, clicking on link2 has revealed content relating to link2 in the grid beneath it.

I had attempted to do this semantically, by grouping the link and content together in a dl..



    
        Link1
        Content 1
    

    
        Link2
        Content 2
    

    
        Link3
        Content 3
    

    ..etc

With this layout, am I right in thinking that i wont be able to make the corresponding 's full width because of the adjacent blocks ??

And if that is the case, do i need to break up the layout in to a series of div's (at the cost of making it less semantic) ?

Any help appreciated.

Many thanks in advance,

user_2802040 · Answer

CSS Grid can do this but only with a a change in the HTML.

Here's one I have which uses hover but could be adapted to clicks very simply.

Essentially, the "description" is hidden until required and the forced to the lower row and the other elements adapt due to the dense value in the auto-flow.

.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);
  }
}


  1
  Description 1
  2
  Description 2
  3
  Description 3
  4
  Description 4
  5
  Description 5
  6
  Description 6

Is there a way of making a child in a grid layout stretch full width with CSS

1 Answers