I'm attempting to ensure that the divs in a column take the width of the widest element, with the exception of the top div which should span 100% of the screen. How can this particular layout be achieved? Please refer to the image below for a clear example:
https://i.sstatic.net/Wd5Ve.png
.feed-list {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.content-card {
width: min-content;
background-color: #aaa;
margin-bottom: 15px;
}
.content-card.full-width {
width: 100%;
}
.thumbnail {
display: flex;
flex-direction: row;
padding: 10px;
}
.thumbnail--image{
width: 15rem;
height: 8rem;
background-color: yellow;
}
.thumbnail--title{
margin-left: 10px;
} <div class="feed-list">
<div class="content-card full-width">
Full row
</div>
<div class="content-card thumbnail">
<div class="thumbnail--image">
</div>
<div class="thumbnail--title">
Lorem
</div>
</div>
<div class="content-card thumbnail">
<div class="thumbnail--image">
</div>
<div class="thumbnail--title">
Lorem_ipsum
</div>
</div>
<div class="content-card thumbnail">
<div class="thumbnail--image">
</div>
<div class="thumbnail--title">
Lorem_ipsum_dolor
</div>
</div>
</div>(Edit: I am also interested in having these divs centered. Is it possible to achieve this as well, or is it too much to ask?)
(Edit #2: @Paulie_D's solution works perfectly! If you are like me and want to maintain the min-content width restriction on the middle column, you can follow @Paulie_D's recommendation and adjust the feed-list class as shown below:
.feed-list {
display: grid;
grid-template-columns: 1fr min-content 1fr;
align-items: center;
padding: 10px;
}
)