html - Change the column order in a css grid -
i playing around css grids.
when view on desktop size (min-width: 769px) have single row 3 columns - this:
--------------------------------------------- | col 1 | col 2 | col 3 | | | | | --------------------------------------------- can css-grid move columns around can on mobile layout:
--------------------------------------------- | col 1 | col 3 | | | | --------------------------------------------- | col 2 | --------------------------------------------- i know span cells this:
.content{ grid-column: 1 / span2; } but want change order of columns. can without pre-processor?
here current grid class:
.my-grid { display:grid; grid-template-columns: 15% 1fr 25% ; grid-template-rows: 1fr; /* many rows need */ grid-gap: 10px; border: 2px solid #222; box-sizing: border-box; }
grid layout provides multiple methods re-arranging grid items. i've listed 3 below.
here's original layout:
grid-container { display: grid; grid-template-columns: 15% 1fr 25%; grid-auto-rows: 50px; /* demo */ grid-gap: 10px; } /* non-essential decorative styles */ grid-item { border: 1px solid gray; background-color: lightgreen; display: flex; align-items: center; justify-content: center; } grid-item:nth-child(2) { background-color: orange; }<grid-container> <grid-item>1</grid-item> <grid-item>2</grid-item> <grid-item>3</grid-item> </grid-container>1. grid-template-areas
the grid-template-areas property allows arrange layout using ascii visual art.
place grid area names (which defined each element) in position want them appear.
grid-container { display: grid; grid-template-columns: 15% 1fr 25%; grid-auto-rows: 50px; /* demo */ grid-gap: 10px; grid-template-areas: "column-1 column-2 column-3"; } grid-item:nth-child(1) { grid-area: column-1; } grid-item:nth-child(2) { grid-area: column-2; } grid-item:nth-child(3) { grid-area: column-3; } @media ( max-width: 500px ) { grid-container { grid-template-columns: 1fr 1fr; grid-template-areas: " column-1 column-3 " " column-2 column-2 "; } } /* non-essential decorative styles */ grid-item { border: 1px solid gray; background-color: lightgreen; display: flex; align-items: center; justify-content: center; } grid-item:nth-child(2) { background-color: orange; }<grid-container> <grid-item>1</grid-item> <grid-item>2</grid-item> <grid-item>3</grid-item> </grid-container>spec reference:
7.3. named areas:
grid-template-areaspropertythis property specifies named grid areas, not associated particular grid item, can referenced grid-placement properties.
the syntax of
grid-template-areasproperty provides visualization of structure of grid, making overall layout of grid container easier understand.all strings must have same number of columns, or else declaration invalid.
if named grid area spans multiple grid cells, cells not form single filled-in rectangle, declaration invalid.
note: non-rectangular or disconnected regions may permitted in future version of module.
2. line-based placement
use grid-row-start, grid-row-end, grid-column-start, grid-column-end, or shorthands, grid-row , grid-column, set grid item's size , location in grid.
grid-container { display: grid; grid-template-columns: 15% 1fr 25%; grid-auto-rows: 50px; /* demo */ grid-gap: 10px; } @media ( max-width: 500px ) { grid-container { grid-template-columns: 1fr 1fr; } grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; } grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; } grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; } } /* non-essential decorative styles */ grid-item { border: 1px solid gray; background-color: lightgreen; display: flex; align-items: center; justify-content: center; } grid-item:nth-child(2) { background-color: orange; }<grid-container> <grid-item>1</grid-item> <grid-item>2</grid-item> <grid-item>3</grid-item> </grid-container>spec reference:
3. order
the order property in grid layout same in flex layout.
grid-container { display: grid; grid-template-columns: 15% 1fr 25%; grid-auto-rows: 50px; /* demo */ grid-gap: 10px; } @media ( max-width: 500px ) { grid-container { grid-template-columns: 1fr 1fr; } grid-item:nth-child(1) { order: 1; } grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; } grid-item:nth-child(3) { order: 2; } } /* non-essential decorative styles */ grid-item { border: 1px solid gray; background-color: lightgreen; display: flex; align-items: center; justify-content: center; } grid-item:nth-child(2) { background-color: orange; }<grid-container> <grid-item>1</grid-item> <grid-item>2</grid-item> <grid-item>3</grid-item> </grid-container>spec reference:
Comments
Post a Comment