How to display container inside two columns?

user_8049233 0
Viewed 193

I would like to display the content of these two columns only inside the container and the columns take the full width of the page like this image down bellow.

Is this possible by using css grid?

Thank you for your help and your support.

Column

<div class="columns">
  <div class="columns--container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>
css-grid css html
1 Answers

Ok, I'm new to grids, but this should work:

.columns {
  height: 400px;
  background: whitesmoke;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
}
.columns-container {
  grid-column-start: 2;
  grid-column-end: 4;
  display: inherit;
  grid-template-columns: auto auto;
  flex-direction: row;
}
.column {
  background: green;
}
<div class="columns">
  <div class="columns-container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>

user_115363950
Related