{"id":3969,"date":"2025-12-18T14:27:13","date_gmt":"2025-12-18T14:27:13","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/"},"modified":"2025-12-18T14:27:13","modified_gmt":"2025-12-18T14:27:13","slug":"responsive-avatars-modern-css-part-1","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/","title":{"rendered":"Responsive Avatars with Modern CSS Techniques"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Creating a responsive list of avatars is a fundamental skill for web developers. Avatars are often used in user profiles, comments sections, or social media applications. With modern CSS techniques, you can create stunning and responsive designs that adapt to various screen sizes.<\/p>\n<p>This blog post will guide you through the steps to create a responsive list of avatars using modern CSS. We\u2019ll also touch upon some helpful tools from WebToolsLab to optimize your workflow.<\/p>\n<h2>What You Will Learn<\/h2>\n<ul>\n<li>How to set up your HTML structure for avatars.<\/li>\n<li>Using CSS Flexbox for a responsive layout.<\/li>\n<li>Utilizing CSS Grid for advanced layouts.<\/li>\n<li>Best practices for styling avatars.<\/li>\n<\/ul>\n<h2>Step 1: Setting Up the HTML Structure<\/h2>\n<p>To create a responsive list of avatars, we first need to define our HTML structure. Here\u2019s a simple example:<\/p>\n<pre><code>&lt;div class=&quot;avatar-list&quot;&gt;\n    &lt;div class=&quot;avatar&quot;&gt;\n        &lt;img src=&quot;avatar1.jpg&quot; alt=&quot;User Avatar 1&quot;&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;avatar&quot;&gt;\n        &lt;img src=&quot;avatar2.jpg&quot; alt=&quot;User Avatar 2&quot;&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;avatar&quot;&gt;\n        &lt;img src=&quot;avatar3.jpg&quot; alt=&quot;User Avatar 3&quot;&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Step 2: Applying CSS Flexbox<\/h2>\n<p>Flexbox is an excellent choice for creating responsive layouts. Let\u2019s apply some CSS to our avatar list:<\/p>\n<pre><code>.avatar-list {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.avatar {\n    margin: 10px;\n    width: 80px;\n    height: 80px;\n}\n\n.avatar img {\n    width: 100%;\n    height: auto;\n    border-radius: 50%;\n}<\/code><\/pre>\n<p>This CSS will center the avatars and allow them to wrap to the next line on smaller screens. The use of <code>border-radius: 50%<\/code> gives the images a circular appearance.<\/p>\n<h2>Step 3: Utilizing CSS Grid for Advanced Layouts<\/h2>\n<p>If you want more control over your layout, CSS Grid is a powerful tool. Here\u2019s how you can implement it:<\/p>\n<pre><code>.avatar-list {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\n    gap: 10px;\n}\n\n.avatar {\n    width: 100%;\n    height: auto;\n}<\/code><\/pre>\n<p>This will create a responsive grid layout that adjusts the number of columns based on the available space. The <code>minmax<\/code> function allows each avatar to maintain a minimum size while expanding to fill available space.<\/p>\n<h2>Step 4: Ensuring Cross-Browser Compatibility<\/h2>\n<p>To ensure that your avatars display correctly across all browsers, consider using CSS prefixes. You can check out the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\" target=\"_blank\">CSS Minifier<\/a> tool for optimizing your CSS code.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this first part of our series, we\u2019ve covered the basics of creating a responsive list of avatars using modern CSS techniques. We started with a simple HTML structure, then applied Flexbox and Grid for responsive layouts. In the next part, we will dive deeper into advanced styling and interactivity.<\/p>\n<p>For further optimization of your web development projects, check out other tools on <a href=\"https:\/\/webtoolslab.io\/\" target=\"_blank\">WebToolsLab<\/a>, such as the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\" target=\"_blank\">HTML Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/js-minifier.php\" target=\"_blank\">JS Minifier<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!<\/p>\n","protected":false},"author":1,"featured_media":2856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Avatars with Modern CSS Techniques - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Avatars with Modern CSS Techniques - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-18T14:27:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Responsive Avatars with Modern CSS Techniques\",\"datePublished\":\"2025-12-18T14:27:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/\"},\"wordCount\":356,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/\",\"name\":\"Responsive Avatars with Modern CSS Techniques - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"datePublished\":\"2025-12-18T14:27:13+00:00\",\"description\":\"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246144776\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-avatars-modern-css-part-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Avatars with Modern CSS Techniques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Avatars with Modern CSS Techniques - WebToolsLab","description":"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Avatars with Modern CSS Techniques - WebToolsLab","og_description":"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!","og_url":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/","og_site_name":"WebToolsLab","article_published_time":"2025-12-18T14:27:13+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Responsive Avatars with Modern CSS Techniques","datePublished":"2025-12-18T14:27:13+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/"},"wordCount":356,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/","url":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/","name":"Responsive Avatars with Modern CSS Techniques - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","datePublished":"2025-12-18T14:27:13+00:00","description":"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","width":1820,"height":1024,"caption":"1752246144776"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/responsive-avatars-modern-css-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Avatars with Modern CSS Techniques"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn to create responsive lists of avatars using modern CSS techniques. Step-by-step guide with code examples included!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3969"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3969\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2856"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}