html - Reorder row columns in repeating CSS grid/table -
when displaying multiple items in table/grid like-manner, possible css override elements order, without knowing number of "rows" in advance?
e.g. here standard table, , more compact alternative same data. had move html elements 2nd 1 (1, 4, 2, 3), otherwise 4th column got offset row.
.layout1 { margin: 1em 0; width: 400px; display: grid; grid-template-columns: auto auto auto max-content; grid-row-gap: 0.2em; } .layout2 { margin: 1em 0; width: 200px; display: grid; grid-template-columns: auto auto max-content; } .layout2 .col1 { margin-top: 0.2em; grid-column: span 2; } .layout2 .col4 { margin-top: 0.2em; grid-row: span 2; } .layout2-5 .col2 { grid-column: 1; } .layout2-5 .col3 { grid-column: 2; } .layout2-5 .col4 { grid-column: 3; } .col1, .col2, .col3, .col4 { padding: 0 1em; } .col1 { background: #f99; } .col2 { background: #9f9; } .col3 { background: #99f; } .col4 { background: #9ff; }
<div class="layout1"> <!--"row"--> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> <!--"row"--> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> </div> <div class="layout2"> <!--"row"--> <div class="col1">1</div><div class="col4">4</div><div class="col2">2</div><div class="col3">3</div> <!--"row"--> <div class="col1">1</div><div class="col4">4</div><div class="col2">2</div><div class="col3">3</div> <div class="col1">1</div><div class="col4">4</div><div class="col2">2</div><div class="col3">3</div> </div> <div class="layout2 layout2-5"> <!--"row"--> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> <!--"row"--> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> <div class="col1">1</div><div class="col2">2</div><div class="col3">3</div><div class="col4">4</div> </div>
what you're trying achieve not possibly grid
display. possible way reorder columns without making use of rows utilise flexbox. using flex-direction: row-reverse
automatically re-orders rows last first, , can 'overflow' reversal across rows flex-wrap: wrap-reverse
.
it's possible completely modify order elements appear in, extending order
property. in following example, i've added few :nth-of-type(4n)
pseduo-selectors. note it's 4n
because there 4 columns per 'row'.
.flex { width: 342px; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; } .flex > div:nth-of-type(4n) { order: 2; } .flex > div:nth-of-type(4n + 1) { order: 1; } .flex > div:nth-of-type(4n + 2) { order: 3; } .flex > div:nth-of-type(4n + 3) { order: 4; } .col1, .col2, .col3, .col4 { width: 50px; padding: 1em; margin: 0.1em; text-align: center; } .col1 { background: #f99; } .col2 { background: #9f9; } .col3 { background: #99f; } .col4 { background: #9ff; }
<div class="flex"> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> </div>
in above example, of .col3
elements wrapped first, of .col2
elements, of .col4
elements, of .col1
elements. feel free adapt suit; need change order
values, , elements order
property applied to. keep in mind order
can go total number of elements; specify all 12 positions manually if desired:
.flex { width: 342px; display: flex; flex-direction: row; flex-wrap: wrap; } .flex > div:nth-of-type(1) { order: 4; } .flex > div:nth-of-type(2) { order: 2; } .flex > div:nth-of-type(3) { order: 1; } .flex > div:nth-of-type(4) { order: 3; } .flex > div:nth-of-type(5) { order: 8; } .flex > div:nth-of-type(6) { order: 6; } .flex > div:nth-of-type(7) { order: 5; } .flex > div:nth-of-type(8) { order: 7; } .flex > div:nth-of-type(9) { order: 12; } .flex > div:nth-of-type(10) { order: 10; } .flex > div:nth-of-type(11) { order: 9; } .flex > div:nth-of-type(12) { order: 11; } .col1, .col2, .col3, .col4 { width: 50px; padding: 1em; margin: 0.1em; text-align: center; } .col1 { background: #f99; } .col2 { background: #9f9; } .col3 { background: #99f; } .col4 { background: #9ff; }
<div class="flex"> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> <!--"row"--> <div class="col1">1</div> <div class="col2">2</div> <div class="col3">3</div> <div class="col4">4</div> </div>
hope helps! :)
Comments
Post a Comment