What is the best way to arrange these elements and a sidebar to achieve this specific layout?

Question

What is the best way to arrange these elements and a sidebar to achieve this specific layout?

Need help aligning items in CSS to achieve this layout using flexbox. Thank you.

| Text   A | text   B | text   C | video |
| text   d | text   E | text   F | video |

The video is the same in both rows and should extend along the side as a sidebar.

.services {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1 1 500px;
}

.serviceclasses {
  box-sizing: content-box;
  text-align: center;
  background-color: #f5f5f5;
  color: #000;
  text-align: center;
  padding: 30px;
  margin: 1px;
  color: #fff;
  border-radius: 10px;
  margin: 40px 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<section id="s2">
  <h2>What do we do here?</h2>
  <br>
  <div id="list">
    <div class="services">
      <div><a href="" id="item1" class="serviceclasses">1</a></div>
      <div><a href="" id="item2" class="serviceclasses">2</a></div>
      <div><a href="" id="item3" class="serviceclasses">3</a></div>
      <div><a href="" id="item4" class="serviceclasses">4</a></div>
      <div><a href="" id="item5" class="serviceclasses">5</a></div>
      <div><a href="" id="item6" class="serviceclasses">6</a></div>
    </div>
    <div class="side">
      <aside class="video-sidebar">
        <figure>
          <figcaption>VIDEO</figcaption>
          <div class="video">
            <video controls>
              <source src = "felixynwa.mp4" width="20px" height="20px">
            </video>
          </div>
          <figcaption>VIDEO BOTTOM TEXT</figcaption>
        </figure>
      </aside>
    </div>
  </div>
  <br>
</section>

html css flexbox grid

Answer 1

Answer №1

If you prefer not to modify your existing HTML structure:

#list {
  display: flex;
}

.services {
  display: grid;
  /* 2 rows of equal height, 3 columns of equal width */
  grid-template: 1fr 1fr / repeat(3, 1fr);
}

Give it a try:

#list {
  display: flex;
}

.services {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr);
}


/* For demonstration purposes only */

#list, .services {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

...or, if you decide to use display: contents:

#list {
  display: grid;
  /* 2 rows of equal height, 3 columns of equal width plus 1 column with automatic width */
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}
#list {
  display: grid;
}
.services {
  /* Treat the element as if its children were direct children of #list */
  display: contents;
}

.side {
  /* Spans all rows, starting and ending at the last column */
  grid-row: 1 / -1;
  grid-column: -2; /* -2 denotes the second-to-last vertical grid line */
}

Test it out:

#list {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}

.services {
  display: contents;
}

.side {
  grid-row: 1 / -1;
  grid-column: -2;
}


/* For demonstration purposes only */

#list {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

References:

Answer 2

If you prefer not to modify your existing HTML structure:

#list {
  display: flex;
}

.services {
  display: grid;
  /* 2 rows of equal height, 3 columns of equal width */
  grid-template: 1fr 1fr / repeat(3, 1fr);
}

Give it a try:

#list {
  display: flex;
}

.services {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr);
}


/* For demonstration purposes only */

#list, .services {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

...or, if you decide to use display: contents:

#list {
  display: grid;
  /* 2 rows of equal height, 3 columns of equal width plus 1 column with automatic width */
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}
#list {
  display: grid;
}
.services {
  /* Treat the element as if its children were direct children of #list */
  display: contents;
}

.side {
  /* Spans all rows, starting and ending at the last column */
  grid-row: 1 / -1;
  grid-column: -2; /* -2 denotes the second-to-last vertical grid line */
}

Test it out:

#list {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}

.services {
  display: contents;
}

.side {
  grid-row: 1 / -1;
  grid-column: -2;
}


/* For demonstration purposes only */

#list {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

References:

What is the best way to arrange these elements and a sidebar to achieve this specific layout?

Answer №1

Similar questions

How can I use cookies to make an HTML div disappear when a button is clicked?

Change the div attribute when clicking on a corresponding link

Create personalized styles for each item within a stack with specific spacing using the @mui library

You can only import Next.js Global CSS from your Custom <App> and not from any other files

jQuery plugin stops functioning properly following the use of the jQuery display block method

Inject environment variable into SCSS file while using webpack

Adding alpha or opacity to the background image will give it a unique and

What could be causing Typed.js to not function properly in my situation?

Tips for decreasing the space between elements in flexbox using justify-content: space-between

Grid system that adapts without distortion

The two <p> elements are being pushed to the right column, which is not their intended display

Discover the perfect technique to employ insertString for effortlessly adding a new line onto a JEditorPane integrated with HTML functionality

Steps to record and upload a video directly to the server using getusermedia

Center an image vertically in an AdminLte content-wrapper division

Integrate a Google Maps API Javascript into a Flex application

Is it advisable to incorporate the <main> element in my code?

Using JavaScript and jQuery to create a delay when handling input events

Applying CSS transition delays to multiple images

Place a vertical slider adjacent to an HTML element on either the left or right side

Optimizing Open Graph tags for sharing WhatsApp links