Summary of insights into traditional CSS Grid & Flexbox

Hello folks. Many CSS layout properties are interdependent and behave differently depending on how they are combined. A practical way to remember them is to mentally group properties based on the direction they control and whether they apply to the container or the items . Inline Direction (left → right in most writing modes) Properties beginning with justify- generally control alignment along the inline axis . justify-content Used on the container to align tracks (in grid) or flex items (in flexbox) along the inline axis when extra space is available. justify-items Used on the grid container to define the default alignment of grid items inside their grid cells along the inline axis. justify-self Used on a grid item to override justify-items for that specific item. Block Direction (top → bottom in most writing modes) Properties beginning with align- generally control alignment along the block axis . align-content Used on the container to align grid tracks or flex lines along the block