html - Flexbox tile layout with consistent margins and alignment -


how might achieve following layout:

enter image description here

with following conditions:

  1. the tiles of each row should equal in height highest element in row

  2. the last tile in row should flush parent container (no gap)

  3. the tiles can different width ratios (3 times one-third or one-third + two-thirds, etc)

  4. the ordering of tiles unknown

  5. no grid framework

  6. modern browsers only

and following markup:

<div class="tile-wrapper">   <div class="tile-container">     <div class="tile third">1/3</div>     <div class="tile third">1/3</div>     <div class="tile third">1/3</div>     <div class="tile two-thirds">2/3</div>     <div class="tile third">1/3</div>     <div class="tile sixth">1/6</div>     <div class="tile sixth">1/6</div>     <div class="tile third">1/3</div>     <div class="tile sixth">1/6</div>     <div class="tile sixth">1/6</div>   </div> </div>

this increasingly common layout can relatively achieved using flexbox , clever container markup.

a common problem tiled layouts maintaining consistent spacing , alignment between tiles of differing sizes across multiple rows. assuming 30px margin separating tiles, set margin-right: 30px on tiles , use nth-of-type selector remove margin-right of last tile in row.

however, isn't possible when relative sizes , order of tiles unknown. example, two-thirds tile next one-third tile won't conform same nth-of-type selector rule required remove margin of last tile row consisting of 3 one-third tiles.

a clever way around instead absord right-most tile's margin width of parent container. can setting outer-most div's width desired width (in case 90%) overflow: hidden, , set inner-container's width 100% plus width of tile margin; width: calc(100% + 30px). way, no matter tile in right-most position of row, tile sit flush edge of container.

to ensure tiles fit desired, set flex-basis proportion of row width we'd them occupy minus tile margin; .third { flex: 0 0 calc(33.33% - 30px); /* 1/3 tile */}

like so:

* {   box-sizing: border-box; } .tile-wrapper {   display: block;   position: relative;   width: 90%;   margin: 0 auto;   overflow: hidden; } .tile-container {   display: flex;   position: relative;   width: calc(100% + 30px);   flex-wrap: wrap; } .tile {   display: inline-block;   margin-right: 30px;   margin-bottom: 30px;   min-height: 200px;   line-height: 199px;   text-align: center;   border: 1px solid black; } .two-thirds {   flex: 0 0 calc(66.66% - 30px); } .third {   flex: 0 0 calc(33.33% - 30px); } .sixth {   flex: 0 0 calc(16.66% - 30px); }

here's fiddle

note: work in modern browsers (chrome, safari, ff, ie11+). there's known bug in ie11 requires use long-hand flex-basis style attribute in order set calc() value.


Comments

Post a Comment

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

i'm running strange behavior powershell start-process call. here call: $process = start-process ` "c:\somepath\mybinary.exe" ` -passthru ` -credential $defaultcredential ` -wait ` -workingdirectory "c:\somepath" ` -loaduserprofile if ($process.exitcode -ne 0) { #do } this call return exit code - 1073741502 . after quick search, exit code seems related generic error when program not load required dll (aka. status_dll_init_failed ). when run without -credential $credential program runs correctly. in order isolate problem, manually launched some.exe in prompt target credential , runs smoothly. so problem seems come way start-process cmdlet launch process. i found potential solutions problem tried apply no luck : link , link . would have idea of what's going on here ? edit 1: run proc mon monitoring program activities when launched directly or via powershell script. problem seems occur when loading kernelbase
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent()
Read more

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -

i have hashset's each stores t, have written test application compares different relation algorithms can think of, i'm not pleased results getting. does there exist more efficient ways of achieving object relations, once testing? using system; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.diagnostics; namespace linqtests { class program { static void main(string[] args) { hashset<user> usertable = new hashset<user>(); hashset<userproperty> userpropertytable = new hashset<userproperty>(); #region lets create dummy data. console.writeline("please wait while creating dummy data, can take while..."); console.writeline(""); int rows = 1000000; for(int x = 0; x < rows; x++) { random rnd = new random(); // ad
Read more