html - CSS-only masonry layout but with elements ordered horizontally -


i need implement run-off-the-mill masonry layout. however, number of reasons don't want use javascript it.

enter image description here

parameters:

  • all elements have same width
  • elements have height cannot calculated server side (an image plus various amounts of text)
  • i can live fixed number of columns if have to

there trivial solution works in modern browsers, the column-count property.

the problem solution elements ordered in columns:

enter image description here

while need elements ordered in rows, @ least approximately:

enter image description here

approaches i've tried don't work:

now could change server side rendering , reorder items dividing number of items number of columns, that's complicated, error-prone (based on how browsers decide split item list columns), i'd avoid if possible.

is there newfangled flexbox magic makes possible?

flexbox

a dynamic masonry layout not possible flexbox, @ least not in clean , efficient way.

flexbox one-dimensional layout system. means can align items along horizontal or vertical lines. flex item confined row or column.

a true grid system two-dimensional, meaning can align items along horizontal , vertical lines. content items can span across rows , columns simultaneously, flex items cannot do.

this why flexbox has limited capacity building grids. it's reason why w3c has developed css3 technology, grid layout.

row wrap

in flex container flex-flow: row wrap, flex items must wrap new rows.

this means a flex item cannot wrap under item in same row.

enter image description here

notice above how div #3 wraps below div #1, creating new row. cannot wrap beneath div #2.

as result, when items aren't tallest in row, white space remains, creating unsightly gaps.

enter image description here

column wrap

if switch flex-flow: column wrap, grid-like layout more attainable. however, column-direction container has 4 potential problems right off bat:

  1. flex items flow vertically, not horizontally (like need in case).
  2. the container expands horizontally, not vertically (like pinterest layout).
  3. it requires container have fixed height, items know wrap.
  4. as of writing, has deficiency in major browsers the container doesn't expand accommodate additional columns.

as result, column-direction container not option in case, , in many other cases.

css grid with item dimensions undefined

grid layout perfect solution problem if various heights of content items pre-determined. other requirements within grid's capacity.

the width , height of grid items must known in order close gaps surrounding items.

so grid, best css has offer building horizontally-flowing masonry layout, falls short in case.

in fact, until css technology arrives ability automatically close gaps, css in general has no solution. require reflowing document, i'm not sure how useful or efficient be.

you'll need script.

javascript solutions tend use absolute positioning, removes content items document flow in order re-arrange them no gaps. here 2 examples:

css grid with item dimensions defined

for layouts width , height of content items known, here's horizontally-flowing masonry layout in pure css:

grid-container {    display: grid;                                                /* 1 */    grid-auto-rows: 50px;                                         /* 2 */    grid-gap: 10px;                                               /* 3 */    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */  }    [short] {    grid-row: span 1;                                             /* 5 */    background-color: green;  }    [tall] {    grid-row: span 2;    background-color: crimson;  }    [taller] {    grid-row: span 3;    background-color: blue;  }    [tallest] {    grid-row: span 4;    background-color: gray;  }    grid-item {    display: flex;    align-items: center;    justify-content: center;    font-size: 1.3em;    font-weight: bold;    color: white;  }
<grid-container>    <grid-item short>01</grid-item>    <grid-item short>02</grid-item>    <grid-item tall>03</grid-item>    <grid-item tall>04</grid-item>    <grid-item short>05</grid-item>    <grid-item taller>06</grid-item>    <grid-item short>07</grid-item>    <grid-item tallest>08</grid-item>    <grid-item tall>09</grid-item>    <grid-item short>10</grid-item>    <grid-item tallest>etc.</grid-item>    <grid-item tall></grid-item>    <grid-item taller></grid-item>    <grid-item short></grid-item>    <grid-item short></grid-item>    <grid-item short></grid-item>    <grid-item short></grid-item>    <grid-item tall></grid-item>    <grid-item short></grid-item>    <grid-item taller></grid-item>    <grid-item short></grid-item>    <grid-item tall></grid-item>    <grid-item short></grid-item>    <grid-item tall></grid-item>    <grid-item short></grid-item>    <grid-item short></grid-item>    <grid-item tallest></grid-item>    <grid-item taller></grid-item>    <grid-item short></grid-item>    <grid-item tallest></grid-item>    <grid-item tall></grid-item>    <grid-item short></grid-item>  </grid-container>

jsfiddle demo

how works

  1. establish block-level grid container. (inline-grid other option)
  2. the grid-auto-rows property sets height of automatically generated rows. in grid each row 50px tall.
  3. the grid-gap property shorthand grid-column-gap , grid-row-gap. rule sets 10px gap between grid items. (it doesn't apply area between items , container.)

  4. the grid-template-columns property sets width of explicitly defined columns.

    the repeat notation defines pattern of repeating columns (or rows).

    the auto-fill function tells grid line many columns (or rows) possible without overflowing container. (this can create similar behavior flex layout's flex-wrap: wrap.)

    the minmax() function sets minimum , maximum size range each column (or row). in code above, width of each column minimum of 30% of container , maximum of whatever free space available.

    the fr unit represents fraction of free space in grid container. it's comparable flexbox's flex-grow property.

  5. with grid-row , span we're telling grid items how many rows should span across.

browser support css grid

  • chrome - full support of march 8, 2017
  • firefox - full support of march 6, 2017
  • safari - full support of march 26, 2017
  • edge - currently in development
  • ie11 - no support current spec; supports obsolete version

here's complete picture: http://caniuse.com/#search=grid

cool grid overlay feature in firefox

in firefox dev tools, when inspect grid container, there tiny grid icon in css declaration. on click displays outline of grid on page.

enter image description here

more details here: https://developer.mozilla.org/en-us/docs/tools/page_inspector/how_to/examine_grid_layouts


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more