ABSTRACT

Layout grids are a useful tool for composition in any visual design discipline, in that they facilitate the task of organizing and accurately positioning elements both horizontally and vertically on a page. The properties used for specifying grid columns, rows, and areas are the longhand grid-template-columns, grid-template-rows, and grid-template-areas properties and their shorthand, grid-template. The grid-column-start, grid-row-start, grid-column-end, and grid-row-end properties are longhand properties for specifying the start or end position of a grid item within a grid row or column. The properties used to align all grid items collectively inside a grid container are justify-content and align-content, and justify-items and align-items, and they are specified inside the grid container's rule. Cascading Style Sheets allows two main types of ordering in relation to grid items: the order in which they appear in a grid container and the order in which they are stacked when they overlap. The former is achieved using the order property and the latter the z-index property.