asp.net.ph

Skip Navigation LinksHome > Abakada: Back to Basics > Language References > CSS Properties > Layout Properties

CSS Layout Properties


CSS layouting properties allow authors to arrange elements in fragment containers such as columns, flex box and grid.

PropertyDescription
column-countBreaks an element’s content into the specified number of columns.
column-fillControls how an element’s contents are balanced when broken into columns.
column-gapSets the size of the gap between an element’s columns.
column-ruleSets the width, style, and color of the line drawn between columns in a multi-column layout.
column-rule-colorSets the color of the line drawn between columns in a multi-column layout.
column-rule-styleSets the style of the line drawn between columns in a multi-column layout.
column-rule-widthSets the width of the line drawn between columns in a multi-column layout.
columnsShorthand notation for setting number and widths of columns when drawing an element’s contents.
column-spanProvides a way for an element to span across all columns
column-widthSets the ideal column width in a multi-column layout.
flexSets how a flex item will grow or shrink to fit the space available in its flex container.
flex-basisSets the initial main size of a flex item.
flex-directionSets how flex items are placed in the flex container.
flex-flowSpecifies how much of the flex container’s free space should be assigned to the flex item’s main size.
flex-growSets the flex grow factor of a flex item.
flex-shrinkSets the flex shrink factor of a flex item.
flex-wrapSets whether wrapping is allowed.
gridShorthand notation for setting all grid properties in a single declaration.
grid-areaShorthand notation for setting a grid item’s size and location within a grid
grid-auto-columnsSpecifies the size of an implicitly-created grid column track or pattern of tracks.
grid-auto-flowSpecifies how auto-placed items get flowed into the grid.
grid-auto-rowsSpecifies the size of an implicitly-created grid row track or pattern of tracks.
grid-columnShorthand notation for settiong a grid item’s size and location within a grid column.
grid-column-endSpecifies a grid item’s end position within the grid column.
grid-column-startSpecifies a grid item’s start position within the grid column.
grid-rowShorthand notation for settiong a grid item’s size and location within a grid row.
grid-row-endSpecifies a grid item’s end position within the grid row.
grid-row-startSpecifies a grid item’s start position within the grid row.
grid-templateShorthand notation for defining all grid properties in a single declaration.
grid-template-areasSpecifies named grid areas.
grid-template-columnsdefines the line names and track sizing functions of the grid columns.
grid-template-rowsdefines the line names and track sizing functions of the grid rows.
initial-letter 
line-height 
text-box shorthand 

External references: CSS Multi-column Layout Module Level 1   CSS Grid Layout Module Level 2   CSS Flexible Box Layout Module Level 1  

See Also

CSS Display and Position Properties



Check out related books at Amazon

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note