Unlocking Grid Layout: Advanced Alignments for Complex Layouts (Optional)

If your elements are inline elements like <span>, you can simply set them side-by-side within their parent container. They will naturally appear next to each other:

<p>This is a paragraph with <span>span 1</span> and <span>span 2</span>.</p>

Floats:

For more control, you can use the float property:

• Set the parent container's display to block to ensure it occupies space.
• Set the child elements' float to either left or right:
  • float: left; will make them float to the left, side-by-side.

Example:

<div style="display: block;">
  <div style="float: left; width: 50%; background: lightblue;">Left content</div>
  <div style="float: right; width: 50%; background: lightgreen;">Right content</div>
</div>

Related Issue:

Floats can sometimes cause issues with following content "wrapping" around the floated elements. To avoid this, you can use a clearfix technique:

<div style="display: block;">
  <div style="float: left; width: 50%; background: lightblue;">Left content</div>
  <div style="float: right; width: 50%; background: lightgreen;">Right content</div>
  <div style="clear: both;"></div> </div>

Flexbox:

Flexbox offers a more modern and versatile approach:

• Set the parent container's display to flex.
• Use justify-content property on the parent to define horizontal alignment:
  • justify-content: flex-start; aligns elements to the left.
  • justify-content: center; centers them.

<div style="display: flex; justify-content: center;">
  <div style="background: lightblue;">Content 1</div>
  <div style="background: lightgreen;">Content 2</div>
</div>

Grid (Optional):

Grid layout provides another powerful option, but it might be more complex for beginners:

• Define the parent container as a grid using display: grid.
• Use grid-template-columns property to specify columns:
  • Set it to "auto" (repeatedly) for equal-width columns.
• Use justify-items property on the parent to define alignment within columns:
  • justify-items: start; aligns elements to the left of each column.
  • justify-items: center; centers them within each column.

<div style="display: grid; grid-template-columns: auto auto;">
  <div style="background: lightblue;">Content 1</div>
  <div style="background: lightgreen;">Content 2</div>
</div>