Tile Layout Shows the concept of using tiles on a webpage to display arrange content Couple of minimal tile examples The final one shows a more complete complex version which uses the RSS feed to fill the tile contents style tileitem overflow hidden important position relative border 1pt solid blue padding 0 padding 5pt border radius 5pt min height 90pt border 1px solid black tileapp display grid grid gap 5px overflow hidden grid template columns repeat auto fit minmax 200px 1fr grid auto flow dense make the nth type wider tileitem nth of type 4n grid column span 2 tileitem nth of type 2n grid row span 2 style div class tileapp div class tileitem item 1 div div class tileitem item 2 div div class tileitem item 3 div div class tileitem item 1 div div class tileitem item 2 div div class tileitem item 3 div div class tileitem item 1 div div class tileitem item 2 div div class tileitem item 3 div div style tileitem overflow hidden important position relative border 1pt solid blue padding 0 padding 5pt border radius 5pt min height 90pt border 1px solid black tileapp display grid grid gap 5px overflow hidden grid template columns repeat auto fit minmax 200px 1fr grid auto flow dense make the nth type wider tileitem nth of type 4n grid column span 1 tileitem nth of type 2n grid row span 2 style div id tileapp class tileapp div class tileitem item 1 div div class tileitem item 2 div div class tileitem item 3 div div script function randColor let r Math floor Math random 255 let g Math floor Math random 255 let b Math floor Math random 255 return rgb r g b for let i 0 i 20 i let tileapp document getElementById tileapp let div document createElement div div style min height 50 Math random 100 px tileapp appendChild div div className tileitem div style background color randColor end for i console log ready script document body style height 1000px let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML tileitem overflow hidden important position relative border 1pt solid blue padding 0 padding 5pt border radius 5pt min height 90pt border 1px solid black tileapp display grid grid gap 5px overflow hidden grid template columns repeat auto fit minmax 200px 1fr grid auto flow dense make the nth type wider tileitem nth of type 4n grid column span 2 tileitem nth of type 2n grid row span 2 Copy RSS example to put content into the tiles https notebook xbdev net index php page rss let rssurl https lifehacker com rss e g https api rss2json com v1 api json rss_url https medium com feed sideshowbarker let d await fetch https api rss2json com v1 api json rss_url rssurl let j await d json console log url j url console log title j title console log description j description console log items length j items length each item title pubDate link guid thumbnail author description function randColor a 1 0 let r Math floor Math random 255 let g Math floor Math random 255 let b Math floor Math random 255 return rgba r g b a end randColor let tileapp document createElement div document body appendChild tileapp tileapp className tileapp for let i 0 i j items length i let div document createElement div tileapp appendChild div div className tileitem div style background color randColor 0 5 let h1 document createElement h1 div appendChild h1 h1 style font size 80 h1 innerHTML j items i title let anc document createElement a anc target _blank anc href window location href anc href j items i link div appendChild anc let img document createElement img anc appendChild img img style width 100 img style border radius 3px img src j items i thumbnail let desc j items i description desc desc replace n img g 3 desc desc substring 0 300 limit to max 300 chars let p document createElement p div appendChild p p style font size 80 p innerHTML desc end for i console log ready
nk type text css link media all link innerHTML tileitem overflow hidden important position relative border 1pt solid blue padding 0 padding 5pt border radius 5pt min height 90pt border 1px solid black tileapp display grid grid gap 5px overflow hidden grid template columns repeat auto fit minmax 200px 1fr grid auto flow dense make the nth type wider tileitem nth of type 4n grid column span 2 tileitem nth of type 2n grid row span 2 Copy RSS example to put content into the tiles https notebook xbdev net index php page rss let rssurl https lifehacker com rss e g https api rss2json com v1 api json rss_url https medium com feed sideshowbarker let d await fetch https api rss2json com v1 api json rss_url rssurl let j await d json console log url j url console log title j title console log description j description console log items length j items length each item title pubDate link guid thumbnail author description function randColor a 1 0 let r Math floor Math random 255 let g Math floor Math random 255 let b Math floor Math random 255 return rgba r g b a end randColor let tileapp document createElement div document body appendChild tileapp tileapp className tileapp for let i 0 i j items length i let div document createElement div tileapp appendChild div div className tileitem div style background color randColor 0 5 let h1 document createElement h1 div appendChild h1 h1 style font size 80 h1 innerHTML j items i title let anc document createElement a anc target _blank anc href window location href anc href j items i link div appendChild anc let img document createElement img anc appendChild img img style width 100 img style border radius 3px img src j items i thumbnail let desc j items i description desc desc replace n img g 3 desc desc substring 0 300 limit to max 300 chars let p document createElement p div appendChild p p style font size 80 p innerHTML desc end for i console log ready