Flexbox how to create this layout-CodePudding

I am using Elementor Pro and was looking to see if it is possible to create this layout with Flexbox:

I was hoping to create a gallery with this layout, but not sure if this is possible using Flexbox?

Here is the site link: https://davidandgeorge.co.uk/

Thanks for any tips. Cheers

CodePudding user response：

It is. I would create a wrapper div for all of the images, then another wrapper div for the two smaller images aside.

<div >
    <img src="" />
    
    <div >
        <img src="" />
        <img src="" />
    </div>
</div>

Then, just use display: flex for the big wrapper, and display: flex with flex-direction: column for the smaller one.

.wrapper-1 {
  display: flex;
}

.wrapper-2 {
  display: flex;
  flex-direction: column;
}

CodePudding user response：

flex:

body {
  margin: 0;
}
.flexer, .flex-1, .flex-2 > div, .flex-2, .flexer img {
  display: flex;
  flex-grow: 1;
}
.flexer, .flex-1, .flex-2 > div {
  padding: .25rem;
}
.flex-1 {
  flex: 2;
  aspect-ratio: .8;
}
.flex-2 {
  flex: 1;
  flex-direction: column;
}
.flexer img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div >
  <div >
    <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
  </div>
  <div >
    <div>
      <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
    </div>
    <div>
      <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
    </div>
  </div>
</div>

grid:

body {
  margin: 0;
}
.grid-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: .5rem;
  padding: .5rem;
}
.grid-1 div:first-child {
  grid-area: 1/1/3/2;
  aspect-ratio: .8;
}
.grid-1 div img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

<div >
  <div>
    <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
  </div>
  <div>
    <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
  </div>
  <div>
    <img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
  </div>
</div>

Grid has slightly cleaner syntax, for both CSS and HTML so... why flex?