Place Items

vel-src: flexbox.css

Utilities for controlling how items are justified and aligned at the same time.

Class	Properties
vel-place-items-center	place-items: center
vel-place-items-start	place-items: start
vel-place-items-end	place-items: end
vel-place-items-stretch	place-items: stretch

Examples

Place items variants

vel-place-items-start

vel-place-items-center

vel-place-items-end

example.html

<div class="vel-flex vel-gap-4">
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-items-start</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-items-start vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:100px">
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-items-center</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-items-center vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:100px">
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-items-end</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-items-end vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:100px">
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
    </div>
  </div>
</div>