{"id":4616,"date":"2025-01-09T14:35:20","date_gmt":"2025-01-09T19:35:20","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4616"},"modified":"2025-01-09T15:10:56","modified_gmt":"2025-01-09T20:10:56","slug":"image-grid-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/design-blocks\/image-grid-block\/","title":{"rendered":"Image Grid Block"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Image Grid Block\n                    <\/h1>\n                \n                                \n                                    \n\n<p>The Image Grid block lets you create a visually appealing image grid that is perfect for showcasing 3 to 5 images.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/image-grid\/\">How to: Image Grid<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"three-columns\" class=\"wp-block-heading\">Three Columns<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-3 max-w-5xl gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"four-columns\" class=\"wp-block-heading\">Four Columns<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-2 lg:grid-cols-4 max-w-5xl gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/trees-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"with-one-image-enlarged\" class=\"wp-block-heading\">With One Image Enlarged<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-3 max-w-5xl gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:col-span-2 md:row-span-2 order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/trees-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/dessert-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/ocean-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"grey-background-large-width-large-gap\" class=\"wp-block-heading\">Grey Background, Large Width, Large Gap<\/h2>\n\n\n    \n<section class=\"w-screen px-6 cu-section cu-section--grey ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-7xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-3 max-w-7xl gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:col-span-2 md:row-span-2 order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/trees-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/dessert-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/ocean-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"two-grid-columns-portrait-aspect-ratio\" class=\"wp-block-heading\">Two Grid Columns, Portrait Aspect Ratio<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-2 max-w-5xl gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[3\/4] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[3\/4] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"white-background-max-width-square-aspect-ratio\" class=\"wp-block-heading\">White Background, Max Width, Square Aspect Ratio<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-max  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-2 lg:grid-cols-4 max-w-max gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[1\/1] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[1\/1] bg-cover bg-center col-span-1 md:col-span-2 md:row-span-2 order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[1\/1] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/lake-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[1\/1] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/trees-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[1\/1] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/dessert-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"three-grid-columns-landscape-aspect-ratio\" class=\"wp-block-heading\">Three Grid Columns, Landscape Aspect Ratio<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-max  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n    <div class=\"cu-imagegrid cu-imagegrid-4 cu-component-updated grid not-prose md:grid-cols-3 max-w-max gap-1 md:gap-2\">\n        \n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/09\/banener-example-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:col-span-2 md:row-span-2 order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset-768x512.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    \n\n<div class=\"relative overflow-hidden aspect-[4\/3] bg-cover bg-center col-span-1 md:order-1 lg:order-none rounded-lg bg-black\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/trees-banner-768x336.jpg); background-position: 50% 50%;\">\n    <\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Three Columns Four Columns With One Image Enlarged Grey Background, Large Width, Large Gap Two Grid Columns, Portrait Aspect Ratio White Background, Max Width, Square Aspect Ratio Three Grid Columns, Landscape Aspect Ratio<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2325,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[11],"class_list":["post-4616","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=4616"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4616\/revisions"}],"predecessor-version":[{"id":4633,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4616\/revisions\/4633"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2325"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4616"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}