first thank you for your answer.
I try this code: https://codepen.io/jeromeminn/pen/gOVQVaX [https://codepen.io/jeromeminn/pen/gOVQVaX][1]
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 40px;
grid-row-gap: 0px;
}
.container {
display: flex; /* or inline-flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content:space-between;
gap: 10px;
}
.item {
flex-grow:1;
flex-basis:0;
}
</style>
<div class="parent">
<div style="background-color: #B5B5B5; width: fit-content"><h1>go to market</h1></div>
<div style="background-color: #C7C7C7; width: fit-content"><h1>branding & sustainability</h1></div>
<div style="background-color: #CDCDCD; width: fit-content"><h1>product as a service</h1></div>
</div>
<div style="clear: both"></div>
<div class="container" style="width: 100%">
<div class="item" style="background-color: #B5B5B5; width: fit-content"><h1>go to market</h1></div>
<div class="item" style="background-color: #C7C7C7; width: fit-content"><h1>branding & sustainability</h1></div>
<div class="item" style="background-color: #CDCDCD; width: fit-content"><h1>product as a service</h1></div>
</div>
but as you can see, no one function. I can't set a width in pixels or percentage as the 3 columns haven't got the same length of text, and if i set the width to "fit-content" for the parent div, it's OK, the space is redistributed like i want but when the text wrap on 2 lines the H1 tag don't take the width of the text but add extra space on the right (maybe the browser don't be able to calculate the new width ?!).
Thank you, regards Jerome