Question 2158 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Flexbox how to create this layout – WordPress

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

enter image description here

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

Tags:

2

Answers


  1. 0

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

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

    Login or Signup to reply.
  2. 0

    flex:

    body {
  margin: 0;
}
.wrap, .flex-col {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.wrap {
  padding: .25rem;
  flex-grow: 1;
}
.basis-1/3 {
  flex: 0 0 33.333333%;
}
.aspect-4/5 {
  aspect-ratio: 4/5;
}
.wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
    <div class="wrap">
  <div class="wrap aspect-4/5">
    <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 class="flex-col basis-1/3">
    <div class="wrap">
      <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 class="wrap">
      <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 class="grid-1">
  <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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search