Masonry Layout for Facebook

Facebook is changing the years-old and familiar layout and design to a new one that is more app-like.

If and when your account gets the new Facebook.com design it is going to look something like this:

It takes a lot of scrolling to view the topics. In this article, I show how we can add custom CSS on Facebook’s main feed and groups pages to show the topics as a masonry grid.

Note: Masonry in CSS is only supported in Firefox at this time and also, it is experimental.

Please remember:

This is for Firefox only. It will work in Chrome but each item in the grid will have the same height which means you will likely see white gaps at the bottom of some items in Chrome.
The CSS is provided as-is w/o support.
The CSS may break any moment as it relies on Facebook’s HTML output.
I may not keep this up-to-date.

Step 1

Enable Masonry in Firefox.

In a new tab, go to about:config, search for masonry and set layout.css.grid-template-masonry-value.enabled to true.

Step 2

Install Stylus extension.

Click on Stylus icon in the toolbar and then the facebook.com link under “Write style for:”.

Paste the following:

/* Group banner */
/*.o4feeg3o {
    display: none;
}*/
div > .rq0escxv.l9j0dhe7.du4w35lb.j83agx80.pfnyh3mw.taijpn5t.gs1a9yip.owycx6da.btwxx1t3.cddn0xzi:first-child {
    display: none;
}

/* Group title below the banner */
.marjyy4e {
    max-width: 1400px;
}

/* "What's on your mind" card */
div[data-pagelet="GroupInlineComposer"] {
    margin-top: 2%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* From Notifications */
/*div[data-pagelet="GroupFeed"] > div[role="feed"]:first-child:not(:last-child){
    max-width: 600px;
    margin: 0 auto;
}*/

/* Top/Recent Posts ⬇️ */
div[data-pagelet="GroupFeed"] > div[role=feed]:last-child .f10w8fjw {
    padding-bottom: 0;
}

/* Make the feed wider */
.tn7ubyq0 {
	width: 100%;
    max-width: 1440px;
    padding-left: 60px;
    padding-right: 60px;
}
.qmfd67dx {
    max-width: none;
}

/* Grid for the main feed */
.o387gat7 {
    flex-basis: 200px;
    max-width: 200px;
}
div[data-pagelet="page"] span#ssrb_feed_start + div[role="feed"] {
    display: grid;
    grid-template-rows: masonry;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 2rem;
}
.fjf4s8hc {
    padding-left: 0;
}
.f7vcsfb0 {
    padding-right: 0;
}
/*div[data-pagelet="page"] .rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.d2edcug0 {
    width: 100%;
}*/
.oh7imozk,
.abvwweq7.abvwweq7 {
    width: 100%;
}
div[data-pagelet="FeedUnit_0"],
div[data-pagelet="FeedUnit_{n}"] {
 margin-bottom: 0;
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
      0 12.5px 10px rgba(0, 0, 0, 0.035),
      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
      0 100px 80px rgba(0, 0, 0, 0.07)
    ;   
}
div[data-pagelet="FeedUnit_0"] .sjgh65i0,
div[data-pagelet="FeedUnit_{n}"] .sjgh65i0 {
    margin-bottom: 0;
}

/* Grid for the groups feed */
/* div[data-pagelet="GroupFeed"] > div[role="feed"]:last-child*/
div[data-pagelet="GroupFeed"] > div[role="feed"] {
    display: grid;
    grid-template-rows: masonry;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 2rem;
}

/* Make sure grid item is aligned to the top */
div[role=feed] > *:first-child {
  grid-area: 1 / 1 / 2 / 4;  
  width: 100%;
}

/* Each card/item in the grid */
div[data-pagelet="GroupFeed"] > div[role="feed"] .sjgh65i0 {
    margin-bottom: 0;
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
      0 12.5px 10px rgba(0, 0, 0, 0.035),
      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
      0 100px 80px rgba(0, 0, 0, 0.07)
    ;
}
/* card padding */
.pybr56ya {
    padding-top: 20px;
}
.tvmbv18p {
    margin-bottom: 20px;
}
.dati1w0a {
    padding-left: 20px;
}
.hv4rvrfc {
    padding-right: 20px;
}
/* remove bottom square corners */
div[data-pagelet="GroupFeed"] .sjgh65i0 {
    border-radius: 8px;
}

/* Remove group about sidebar */
.fop5sh7t > .aghb5jc5:nth-child(2) {
  display: none;
}

/* Remove unread announcement reminder */
.aghb5jc5 > div[data-pagelet="GroupInlineComposer"] + div[data-pagelet="GroupFeed"] > .k4urcfbm { 
  display: none;
}

/* Remove manage group (admins only) */
.rq0escxv.l9j0dhe7.tkr6xdv7.j83agx80.cbu4d94t.d2edcug0.pfnyh3mw.dp1hu0rb.rek2kq2y.o36gj0jk[aria-label="Area where all of the admin tools are"]{
    display: none;
}

/* Hide "Inroducing Messenger Rooms for Groups" */
div[data-pagelet="GroupFeed"] > div.sjgh65i0 {
    display: none;
}


/* Facebook home */

/* Hide shortcuts in the left sidebar at the top */
.buofh1pr > ul + div {
    display: none;
}

/* Hide Stories */
div[data-pagelet="Stories"] {
    display: none;
}

/* Hide Rooms */
div[data-pagelet="VideoChatHomeUnit"] {
    display: none;
}

/* Remove Facebook privacy etc. links in the bottom left */
footer[aria-label="Facebook"] {
    display: none;
}

/* Create Post */

.dbpd2lw6.l9j0dhe7.stjgntxs.ni8dbmo4.lzcic4wl.idiwt2bm {
    width: 600px !important;
}

.kr520xx4.pedkr2u6.ms05siws.pnx7fd3z.b7h9ocf4.pmk7jnqg.j9ispegn {
    width: 100%;
}

Set this to apply to: