• Report: Apple Intelligence to open up to developers at WWDC

    How much would your company pay for a focused AI system built by your own experts, one that brings in the best of all available genAI systems within an integration that works via iCloud Private Compute and Apple Intelligence?

    I ask this because, if you stretch your neck and use your imagination just a little bit, you can just about see signs that suggest Apple has a chance to build a system like this. It just needs to loosen up its approach to third-party AI development, make its own APIs more widely available to external developers, and create a highly secure cloud-based system with which to handle complex requests.

    Apple has at least one of those components already — and may soon have two more.

    Apple to introduce Apple Intelligence SDK at WWDC?

    That’s one way to look at the most recent news to emanate from behind the doors of Cupertino via the man who seems to have becomeApple’s Chief Rumors Officer, Bloomberg’s Mark Gurman. He says Apple intends to open up access to its own Apple Intelligence APIs at WWDC next month, making it possible for developers to integrate the AI systems it has built into their own applications. 

    The company is expected to announce a new software development kitin iOS 19 that will make it easier for app developers to add Apple Intelligence features such as Writing Tools or Genmoji to their software.  

    Developers can already integrate some Apple Intelligence features into their apps, but this SDK would permit them to create new AI features using Apple’s own AI frameworks. At present, they must use third-party models to accomplish this. 

    What about Private Cloud Compute?

    The thing is, once you recognize that some iOS applications are themselves front doors to other vendors’ genAI systems, the move may give Apple a double whammy — a chance to offer its highly secure AI solutions via the apps people choose to use, along with a route through which to provide additional solutions for use within those apps, potentially extending to access of some kind to its Private Cloud Compute systems. 

    The latter is a big deal. It means AI developers may be able to find some way to offer up their own solutions to Apple users, making them available via the privacy shield Private Cloud Compute provides. 

    What that means is the convenience of AI along with the privacy and security Apple provides. 

    Take that a couple of steps further down this particular episode of Pure Apple Speculation, and you can see that enterprise users might be pretty excited about that. It matters to business users in regulated industries who want to be able to use powerful AI services but do not want to leave their data at potential risk. 

    Steps on the journey

    I’m not saying Apple will be able to introduce anything quite like this at WWDC. 

    In recent months, stories emerging from inside Apple’s AI teams suggest things are far too chaotic and stressful for such a plan to be put in place. However, I do think that with the addition of an Apple Intelligence SDK and the steady deployment of Apple’s Private Cloud Compute servers, the opportunity to work in closer partnership with third-party AI developers exists.It may not be the easiest opportunity for Apple to embrace culturally and would to some extent signify how far behind Apple has fallen in some respects, but it will be a smart way to maintain hardware and software relevance and provide unique services to its customers. Working with others, Apple may be able to deliver a best-in-class AI you can safely use, privately and securely, without the data leaks. That’s an answer to a question that has slowed AI adoption. 

    While you have to be very wary when any Big Tech firm promises privacy, and don’t want to find out subsequently that all of this was no more than a velvet glove treatment to gently usher us into a ghastly automated dystopia, there is a need for private AI. Educators, health services, and businesspeople particularly need it, and by working in a positive and constructive way with third-party AI developers, Apple may now have a strategically functional way in which to deliver it.

    We shall see.

    You can follow me on social media! Join me on BlueSky,  LinkedIn, and Mastodon.
    #report #apple #intelligence #open #developers
    Report: Apple Intelligence to open up to developers at WWDC
    How much would your company pay for a focused AI system built by your own experts, one that brings in the best of all available genAI systems within an integration that works via iCloud Private Compute and Apple Intelligence? I ask this because, if you stretch your neck and use your imagination just a little bit, you can just about see signs that suggest Apple has a chance to build a system like this. It just needs to loosen up its approach to third-party AI development, make its own APIs more widely available to external developers, and create a highly secure cloud-based system with which to handle complex requests. Apple has at least one of those components already — and may soon have two more. Apple to introduce Apple Intelligence SDK at WWDC? That’s one way to look at the most recent news to emanate from behind the doors of Cupertino via the man who seems to have becomeApple’s Chief Rumors Officer, Bloomberg’s Mark Gurman. He says Apple intends to open up access to its own Apple Intelligence APIs at WWDC next month, making it possible for developers to integrate the AI systems it has built into their own applications.  The company is expected to announce a new software development kitin iOS 19 that will make it easier for app developers to add Apple Intelligence features such as Writing Tools or Genmoji to their software.   Developers can already integrate some Apple Intelligence features into their apps, but this SDK would permit them to create new AI features using Apple’s own AI frameworks. At present, they must use third-party models to accomplish this.  What about Private Cloud Compute? The thing is, once you recognize that some iOS applications are themselves front doors to other vendors’ genAI systems, the move may give Apple a double whammy — a chance to offer its highly secure AI solutions via the apps people choose to use, along with a route through which to provide additional solutions for use within those apps, potentially extending to access of some kind to its Private Cloud Compute systems.  The latter is a big deal. It means AI developers may be able to find some way to offer up their own solutions to Apple users, making them available via the privacy shield Private Cloud Compute provides.  What that means is the convenience of AI along with the privacy and security Apple provides.  Take that a couple of steps further down this particular episode of Pure Apple Speculation, and you can see that enterprise users might be pretty excited about that. It matters to business users in regulated industries who want to be able to use powerful AI services but do not want to leave their data at potential risk.  Steps on the journey I’m not saying Apple will be able to introduce anything quite like this at WWDC.  In recent months, stories emerging from inside Apple’s AI teams suggest things are far too chaotic and stressful for such a plan to be put in place. However, I do think that with the addition of an Apple Intelligence SDK and the steady deployment of Apple’s Private Cloud Compute servers, the opportunity to work in closer partnership with third-party AI developers exists.It may not be the easiest opportunity for Apple to embrace culturally and would to some extent signify how far behind Apple has fallen in some respects, but it will be a smart way to maintain hardware and software relevance and provide unique services to its customers. Working with others, Apple may be able to deliver a best-in-class AI you can safely use, privately and securely, without the data leaks. That’s an answer to a question that has slowed AI adoption.  While you have to be very wary when any Big Tech firm promises privacy, and don’t want to find out subsequently that all of this was no more than a velvet glove treatment to gently usher us into a ghastly automated dystopia, there is a need for private AI. Educators, health services, and businesspeople particularly need it, and by working in a positive and constructive way with third-party AI developers, Apple may now have a strategically functional way in which to deliver it. We shall see. You can follow me on social media! Join me on BlueSky,  LinkedIn, and Mastodon. #report #apple #intelligence #open #developers
    WWW.COMPUTERWORLD.COM
    Report: Apple Intelligence to open up to developers at WWDC
    How much would your company pay for a focused AI system built by your own experts, one that brings in the best of all available genAI systems within an integration that works via iCloud Private Compute and Apple Intelligence? I ask this because, if you stretch your neck and use your imagination just a little bit, you can just about see signs that suggest Apple has a chance to build a system like this. It just needs to loosen up its approach to third-party AI development, make its own APIs more widely available to external developers, and create a highly secure cloud-based system with which to handle complex requests. Apple has at least one of those components already — and may soon have two more. Apple to introduce Apple Intelligence SDK at WWDC? That’s one way to look at the most recent news to emanate from behind the doors of Cupertino via the man who seems to have become (at least to some factions in Apple’s inner circle) Apple’s Chief Rumors Officer (CRO), Bloomberg’s Mark Gurman. He says Apple intends to open up access to its own Apple Intelligence APIs at WWDC next month, making it possible for developers to integrate the AI systems it has built into their own applications.  The company is expected to announce a new software development kit (SDK) in iOS 19 that will make it easier for app developers to add Apple Intelligence features such as Writing Tools or Genmoji to their software. (Gurman’s story says that Apple will at first give developers access to smaller AI tools that can run on the device.)  Developers can already integrate some Apple Intelligence features into their apps, but this SDK would permit them to create new AI features using Apple’s own AI frameworks. At present, they must use third-party models to accomplish this.  What about Private Cloud Compute? The thing is, once you recognize that some iOS applications are themselves front doors to other vendors’ genAI systems, the move may give Apple a double whammy — a chance to offer its highly secure AI solutions via the apps people choose to use, along with a route through which to provide additional solutions for use within those apps, potentially extending to access of some kind to its Private Cloud Compute systems.  The latter is a big deal. It means AI developers may be able to find some way to offer up their own solutions to Apple users, making them available via the privacy shield Private Cloud Compute provides.  What that means is the convenience of AI along with the privacy and security Apple provides.  Take that a couple of steps further down this particular episode of Pure Apple Speculation, and you can see that enterprise users might be pretty excited about that. It matters to business users in regulated industries who want to be able to use powerful AI services but do not want to leave their data at potential risk.  Steps on the journey I’m not saying Apple will be able to introduce anything quite like this at WWDC.  In recent months, stories emerging from inside Apple’s AI teams suggest things are far too chaotic and stressful for such a plan to be put in place. However, I do think that with the addition of an Apple Intelligence SDK and the steady deployment of Apple’s Private Cloud Compute servers, the opportunity to work in closer partnership with third-party AI developers exists. (Don’t ignore those servers — Apple is, after all, working with huge manufacturers to produce them in quantity, which implies it expects to see them being widely used.) It may not be the easiest opportunity for Apple to embrace culturally and would to some extent signify how far behind Apple has fallen in some respects, but it will be a smart way to maintain hardware and software relevance and provide unique services to its customers. Working with others, Apple may be able to deliver a best-in-class AI you can safely use, privately and securely, without the data leaks. That’s an answer to a question that has slowed AI adoption.  While you have to be very wary when any Big Tech firm promises privacy (as Siri once showed us), and don’t want to find out subsequently that all of this was no more than a velvet glove treatment to gently usher us into a ghastly automated dystopia, there is a need for private AI. Educators, health services, and businesspeople particularly need it, and by working in a positive and constructive way with third-party AI developers, Apple may now have a strategically functional way in which to deliver it. We shall see. You can follow me on social media! Join me on BlueSky,  LinkedIn, and Mastodon.
    0 Comments 0 Shares
  • CSS Grid with Galaxy layout: now available in Figma

    CSS grid with Galaxy layout: now available in FigmaHow I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.1. The history of CSS gridBack in 2005, Bert Bos published the CSS3 Advanced Layout draft. After nearly two decades of work by the CSS Working Group and passionate advocates, CSS Grid has evolved into one of the most powerful layout systems for the web and developers have been using it in production for years.Now, in 2025, designers can finally experience CSS Grid directly in Figma. Hopefully, Figma will continue evolving to support all CSS properties, functions, data types, and values, so design and code can align even more seamlessly. 2. Observe: bringing installation Art to the webTo show what’s possible, I will show you through how I used CSS Grid to recreate a large scale installation artwork on the web from concept to implementation. Galaxyis one of the signature works by Korean contemporary artist Kim Eull, consisting of 1,450 individual drawings. The moment I saw it, I knew it could be reimagined with CSS Grid.Galaxy, Installation, Kim Eull, 2016Galaxy, Installation, Kim Eull, 2016When I saw it, I thought it could be quite easy to re-create and visualise it using CSS Grid. In summer © 2023 Disney and related entities. All Rights Reserved.But it was more complicated than I expected making the Galaxy layout in CSS Grid with 1,450 drawings .The first draft grid drawingMy first draft involved sketching a rough grid layout inspired by the installation. From there, I defined the following design goals: Design GoalsThe grid container should resemble the Galaxy installation.It should be flexible and responsive across screen sizes.Each grid item should have a hover effect and link to its own content page.Each item must match the exact shape ratioof the original artwork.Specified properties and values for each grid item in WordPress so the client can easily choose and upload artwork for each grid item if he wishes to change it. Image configurations in WordPressImage size: small, medium, largeShape: vertical rectangle, horizontal rectangle, square3. Research: CSS grid capabilities① Understand the CSS grid structureLet me briefly explain the basics of CSS Grid. Think of CSS Grid like an IKEA IVAR shelf: the container is the outer frame, and the items are the individual cells. Define the frame, decide the rows and columns, and then neatly arrange your content, just like organising your favourite shelf.IKEA IVAR © Inter IKEA Systems B.V. 1999–2023I hope this cheat sheet I made for this article helps you understand the CSS grid structure. 🧙🏻CSS Grid container and itemIVAR outer frame = grid container = parentEach cell = grid item = childCSS Grid TerminologyLine: horizontal or vertical dividerCell: the smallest unit of the gridTrack: the space between two linesArea: a group of cells defined using grid-area② Find suitable propertiesAs you can see from the CSS Grid cheatsheet below, CSS Grid has many properties and values as well as various features. It was important to find suitable properties and values of CSS Grid for the Galaxy layout. I tried all properties and found grid-template containers and grid-area items worked best for the Galaxy layout.CSS Grid properties4. Make: Prototyping & Iterating① Sketch the layout by handCSS Grid prototypingTo define grid-area values visually, I printed a grid and sketched the Galaxy layout by hand. Back then, Figma didn’t support grid layouts like it does now so I had to draw by hand. But now, thanks to Figma’s new Grid feature, you can map and plan layouts much more easily CSS Grid prototyping in FigmaThat said, while I really enjoyed using Figma Grid, I noticed a few limitations that made it tricky to recreate the Galaxy layout precisely. A Few Limitations in Figma GridRow and column gapsNo variable support for row/column gapsFigma only allows fixed px values for grid gaps, but I need to use primitive values from our design system library to ensure consistency across components and patterns. It would be great if Figma supported variables or design tokens for this. Note: Gaps in CSS can use any length unit or percentage — but not fr.No visible line numbers in FigmaNo visible line numbersWhen placing images based on grid-area, it’s hard to know the exact row/column without indicators. This made it difficult to match my CSS layout precisely.Elements shift randomly when adding new imagesEvery time I added a new image, other elements jumped around unexpectedly. I had to manually re-align everything — bug or feature?Limited support for CSS grid propertiesEspecially for parent-level properties like justify-items, align-items, place-content, etc. Figma currently only supports basic alignment and fixed units. This limits the full expressive potential of CSS Grid. If you’ve found any tricks or tips for these challenges, I’d truly appreciate it if you shared them!Despite these challenges, I believe Figma will continue to evolve and support more CSS properties, functions, data types, and values, aligning design and code even more seamlessly. If you have tips for that, please share!Now, let’s go back to the process of building the Galaxy layout.② Numbering the grid linesI labeled each row and column in the sketch, these line numbers help define each grid item’s position using the grid-area shorthand.Numbering the grid linesAlso, we can inspect these numbers in the Chrome DevTools like below.CSS grid in Chrome DevTools③ Set the grid containerSet the grid container using grid-templateHere is the CSS code for the container. I used the repeat CSS function to create a certain number of columns and rows, grid-template shorthand with repeatto create a 25×21 grid..container { display: grid; grid-template: repeat/ repeat;}Set the Grid Container: Repeat CSS function④ Define Grid ItemsNow I had 525 grid cells. To specify the grid item’s size and location for the Galaxy layout, I defined grid-area shorthand property for 29 items.grid-area value: row-start / column-start / row-end / column-endDefine grid itemsHere is the CSS code for the 29 items.//item position.item1 { grid-area: 2/6/8/9;}.item2 { grid-area: 3/9/6/11;}.item3 { grid-area: 1/11/6/14;}.......item27 { grid-area: 22/18/24/19;}.item28 { grid-area: 7/4/12/6;}.item29 { grid-area: 21/7/25/10;}Responsive CSS Grid test on CodePenThe grid-area CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothingto its grid placement, thereby specifying the edges of its grid area. -MDNgrid-area - CSS: Cascading Style Sheets | MDN⑤ Insert Images into HTMLAs the final step, I selected artwork images that matched each grid item’s shape to avoid awkward cropping. One day, I hope we’ll have a CSS algorithm smart enough to auto-pick image ratios. . Reflect: 3 Key LearningsAfter building the Galaxy layout with CSS Grid, I took a moment to reflect, just like in any good design process. Looking back helped me identify what worked, what surprised me, and what I’d do differently next time. Here are three insights that stood out:① Implicit grid vs Explicit gridAn implicit grid is automatically generated by the browser when items extend beyond the defined structure.An explicit grid is one you define manually using grid-template-columns and grid-template-rows.Understanding the difference helps you take full control of your layout.Comparing implicit and explicit grids in CSS">https://medium.com/media/25b574bf51ba75b81f31a1435d74c649/href Watch: Wes Bos — Implicit vs Explicit Tracks② How height works in CSSThe height CSS property specifies the height of an element. By default, the property defines the height of the content area. -MDNThe height property controls an element’s vertical size.By default, it matches the height of the content inside.No content = no height100px content = 100px heighthttps://medium.com/media/2cf58e34fbb0c76baaee2454c9cc9c46/href③ fr units need explicit height Height doesn’t update automatically like width does.Unlike columns, which adjust to screen width, rows using fr units don’t respond the same way. If the container has no defined height, the browser can’t calculate row heights, causing layout issues like the one shown below.fr units need explicit heightThe browser can’t calculate row heights, which can cause the layout to break unexpectedly, as shown bwhelow.The browser can’t calculate row heightsHeight doesn’t get updated automaticallyWhereas, even if there is no explicit width value in the block-level element specified, the browser automatically calculates the width value of the element by the browser size.Width gets updated automaticallyFor this reason, if you wanted to use fr unit in the grid-templage-rows property and takes up the entire height of the screen, you should put an explicit height on the container.Use fr unit in the grid-templage-rows property and takes up the entire height of the screen.container { height: 100vh; grid-template-row: repeat;} now, I often forget CSS Grid properties when revisiting projects . That’s why I created a CSS Grid Cheatsheet, a quick reference to help me remember and apply the right values fast.CSS Grid cheatsheet6. Resources to spark your imaginationDisclaimer: Parody of “I Can Be Anything” by Shinsuke Yoshitake, created by @nanacodesign for non-commercial, educational use. Original artwork © Shinsuke Yoshitake and/or its publishers.CSS Grid is far more powerful than just card layouts. Developers have explored it for years to create animations, 3D effects, and interactive designs with ease.To help you see what’s possible, I’ve collected some brilliant CodePen demos that show CSS Grid in action. These are real examples that you can explore, learn from, or adapt directly into your own projects: CSS grid codepen collectionCSS grid codepen collection3D CSS Grid Exploding Stack by JheyIsometric eCommerce CSS Grid by Andy BarefootLayout Demo #10 — Rounded grid layout stacked: Rainbow by Mandy MichaelGenerative Kong Summit Patterns by Adam KuhnCountdown with grid css By Sergio AndradeKALEIDOSCOPE by LiamCSS Grid Ribbon layout by Andy BarefootAnimated CSS Gridby BramusCSS Grid: Monopolyby Olivia NgCSS Grid Responsive Perspective layout by Andy BarefootTriangle Grid with nth-child #CodePenChallenge by Stephen LeeResponsive Mondrian Art with CSS Grid by Ryan Yu ResourcesConfig 2025: Structure your designs with Figma Grid, a new way to use auto layoutFigma’s new grid — you must understand CSS Grid as a designer by Christine VallaureA Complete Guide to CSS Grid | CSS-Tricks by Chris HouseCSS Grid Course by Wes BosGrid by example by Rachel AndrewCSS Grid Basics by Jen SimmonsWeb.dev > Learn CSS > GridMozilla > CSS Grid LayoutInspect CSS grid layoutsResponsive Card Grid Layout by Ryan YuInteresting Layouts with CSS Grid by Miriam SuzanneBuild a Classic Layout FAST in CSS Grid by Miriam SuzanneAn Interactive Guide to CSS Grid by Josh Comeau A huge thank you to all the creators and advocates who’ve shared these valuable resources. Your work continues to inspire and empower the community. Any feedback or just say Hi!I’d love to hear how I can improve this article for everyone. Drop me a comment below, or reach out on Bluesky or LinkedIn.If you enjoyed it, feel free to show some loveand stay tuned for more. Thank you! 🧙🏻‍♀️CSS Grid with Galaxy layout: now available in Figma was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
    #css #grid #with #galaxy #layout
    CSS Grid with Galaxy layout: now available in Figma
    CSS grid with Galaxy layout: now available in FigmaHow I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.1. The history of CSS gridBack in 2005, Bert Bos published the CSS3 Advanced Layout draft. After nearly two decades of work by the CSS Working Group and passionate advocates, CSS Grid has evolved into one of the most powerful layout systems for the web and developers have been using it in production for years.Now, in 2025, designers can finally experience CSS Grid directly in Figma. Hopefully, Figma will continue evolving to support all CSS properties, functions, data types, and values, so design and code can align even more seamlessly. 🤝✨2. Observe: bringing installation Art to the webTo show what’s possible, I will show you through how I used CSS Grid to recreate a large scale installation artwork on the web from concept to implementation. Galaxyis one of the signature works by Korean contemporary artist Kim Eull, consisting of 1,450 individual drawings. The moment I saw it, I knew it could be reimagined with CSS Grid.Galaxy, Installation, Kim Eull, 2016Galaxy, Installation, Kim Eull, 2016When I saw it, I thought it could be quite easy to re-create and visualise it using CSS Grid. 😎In summer © 2023 Disney and related entities. All Rights Reserved.But it was more complicated than I expected making the Galaxy layout in CSS Grid with 1,450 drawings 😅.The first draft grid drawingMy first draft involved sketching a rough grid layout inspired by the installation. From there, I defined the following design goals:🎯 Design GoalsThe grid container should resemble the Galaxy installation.It should be flexible and responsive across screen sizes.Each grid item should have a hover effect and link to its own content page.Each item must match the exact shape ratioof the original artwork.Specified properties and values for each grid item in WordPress so the client can easily choose and upload artwork for each grid item if he wishes to change it.⚙️ Image configurations in WordPressImage size: small, medium, largeShape: vertical rectangle, horizontal rectangle, square3. Research: CSS grid capabilities① Understand the CSS grid structureLet me briefly explain the basics of CSS Grid. Think of CSS Grid like an IKEA IVAR shelf: the container is the outer frame, and the items are the individual cells. Define the frame, decide the rows and columns, and then neatly arrange your content, just like organising your favourite shelf.IKEA IVAR © Inter IKEA Systems B.V. 1999–2023I hope this cheat sheet I made for this article helps you understand the CSS grid structure. 🧙🏻CSS Grid container and itemIVAR outer frame = grid container = parentEach cell = grid item = childCSS Grid TerminologyLine: horizontal or vertical dividerCell: the smallest unit of the gridTrack: the space between two linesArea: a group of cells defined using grid-area② Find suitable propertiesAs you can see from the CSS Grid cheatsheet below, CSS Grid has many properties and values as well as various features. It was important to find suitable properties and values of CSS Grid for the Galaxy layout. I tried all properties and found grid-template containers and grid-area items worked best for the Galaxy layout.CSS Grid properties4. Make: Prototyping & Iterating① Sketch the layout by handCSS Grid prototypingTo define grid-area values visually, I printed a grid and sketched the Galaxy layout by hand. Back then, Figma didn’t support grid layouts like it does now so I had to draw by hand. But now, thanks to Figma’s new Grid feature, you can map and plan layouts much more easily 🙌CSS Grid prototyping in FigmaThat said, while I really enjoyed using Figma Grid, I noticed a few limitations that made it tricky to recreate the Galaxy layout precisely.🚧 A Few Limitations in Figma GridRow and column gapsNo variable support for row/column gapsFigma only allows fixed px values for grid gaps, but I need to use primitive values from our design system library to ensure consistency across components and patterns. It would be great if Figma supported variables or design tokens for this.⚠️ Note: Gaps in CSS can use any length unit or percentage — but not fr.No visible line numbers in FigmaNo visible line numbersWhen placing images based on grid-area, it’s hard to know the exact row/column without indicators. This made it difficult to match my CSS layout precisely.Elements shift randomly when adding new imagesEvery time I added a new image, other elements jumped around unexpectedly. I had to manually re-align everything — bug or feature?Limited support for CSS grid propertiesEspecially for parent-level properties like justify-items, align-items, place-content, etc. Figma currently only supports basic alignment and fixed units. This limits the full expressive potential of CSS Grid.🙏 If you’ve found any tricks or tips for these challenges, I’d truly appreciate it if you shared them!Despite these challenges, I believe Figma will continue to evolve and support more CSS properties, functions, data types, and values, aligning design and code even more seamlessly. If you have tips for that, please share!Now, let’s go back to the process of building the Galaxy layout.② Numbering the grid linesI labeled each row and column in the sketch, these line numbers help define each grid item’s position using the grid-area shorthand.Numbering the grid linesAlso, we can inspect these numbers in the Chrome DevTools like below.CSS grid in Chrome DevTools③ Set the grid containerSet the grid container using grid-templateHere is the CSS code for the container. I used the repeat CSS function to create a certain number of columns and rows, grid-template shorthand with repeatto create a 25×21 grid..container { display: grid; grid-template: repeat/ repeat;}Set the Grid Container: Repeat CSS function④ Define Grid ItemsNow I had 525 grid cells. To specify the grid item’s size and location for the Galaxy layout, I defined grid-area shorthand property for 29 items.grid-area value: row-start / column-start / row-end / column-endDefine grid itemsHere is the CSS code for the 29 items.//item position.item1 { grid-area: 2/6/8/9;}.item2 { grid-area: 3/9/6/11;}.item3 { grid-area: 1/11/6/14;}.......item27 { grid-area: 22/18/24/19;}.item28 { grid-area: 7/4/12/6;}.item29 { grid-area: 21/7/25/10;}Responsive CSS Grid test on CodePenThe grid-area CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothingto its grid placement, thereby specifying the edges of its grid area. -MDNgrid-area - CSS: Cascading Style Sheets | MDN⑤ Insert Images into HTMLAs the final step, I selected artwork images that matched each grid item’s shape to avoid awkward cropping. One day, I hope we’ll have a CSS algorithm smart enough to auto-pick image ratios. 😉. Reflect: 3 Key LearningsAfter building the Galaxy layout with CSS Grid, I took a moment to reflect, just like in any good design process. Looking back helped me identify what worked, what surprised me, and what I’d do differently next time. Here are three insights that stood out:① Implicit grid vs Explicit gridAn implicit grid is automatically generated by the browser when items extend beyond the defined structure.An explicit grid is one you define manually using grid-template-columns and grid-template-rows.Understanding the difference helps you take full control of your layout.Comparing implicit and explicit grids in CSShttps://medium.com/media/25b574bf51ba75b81f31a1435d74c649/href👉 Watch: Wes Bos — Implicit vs Explicit Tracks② How height works in CSSThe height CSS property specifies the height of an element. By default, the property defines the height of the content area. -MDNThe height property controls an element’s vertical size.By default, it matches the height of the content inside.No content = no height100px content = 100px heighthttps://medium.com/media/2cf58e34fbb0c76baaee2454c9cc9c46/href③ fr units need explicit height💡 Height doesn’t update automatically like width does.Unlike columns, which adjust to screen width, rows using fr units don’t respond the same way. If the container has no defined height, the browser can’t calculate row heights, causing layout issues like the one shown below.fr units need explicit heightThe browser can’t calculate row heights, which can cause the layout to break unexpectedly, as shown bwhelow.The browser can’t calculate row heightsHeight doesn’t get updated automaticallyWhereas, even if there is no explicit width value in the block-level element specified, the browser automatically calculates the width value of the element by the browser size.Width gets updated automaticallyFor this reason, if you wanted to use fr unit in the grid-templage-rows property and takes up the entire height of the screen, you should put an explicit height on the container.Use fr unit in the grid-templage-rows property and takes up the entire height of the screen.container { height: 100vh; grid-template-row: repeat;} now, I often forget CSS Grid properties when revisiting projects 😅. That’s why I created a CSS Grid Cheatsheet, a quick reference to help me remember and apply the right values fast.CSS Grid cheatsheet6. Resources to spark your imaginationDisclaimer: Parody of “I Can Be Anything” by Shinsuke Yoshitake, created by @nanacodesign for non-commercial, educational use. Original artwork © Shinsuke Yoshitake and/or its publishers.CSS Grid is far more powerful than just card layouts. Developers have explored it for years to create animations, 3D effects, and interactive designs with ease.To help you see what’s possible, I’ve collected some brilliant CodePen demos that show CSS Grid in action. These are real examples that you can explore, learn from, or adapt directly into your own projects:🕹️ CSS grid codepen collectionCSS grid codepen collection3D CSS Grid Exploding Stack by JheyIsometric eCommerce CSS Grid by Andy BarefootLayout Demo #10 — Rounded grid layout stacked: Rainbow by Mandy MichaelGenerative Kong Summit Patterns by Adam KuhnCountdown with grid css By Sergio AndradeKALEIDOSCOPE by LiamCSS Grid Ribbon layout by Andy BarefootAnimated CSS Gridby BramusCSS Grid: Monopolyby Olivia NgCSS Grid Responsive Perspective layout by Andy BarefootTriangle Grid with nth-child #CodePenChallenge by Stephen LeeResponsive Mondrian Art with CSS Grid by Ryan Yu📚 ResourcesConfig 2025: Structure your designs with Figma Grid, a new way to use auto layoutFigma’s new grid — you must understand CSS Grid as a designer by Christine VallaureA Complete Guide to CSS Grid | CSS-Tricks by Chris HouseCSS Grid Course by Wes BosGrid by example by Rachel AndrewCSS Grid Basics by Jen SimmonsWeb.dev > Learn CSS > GridMozilla > CSS Grid LayoutInspect CSS grid layoutsResponsive Card Grid Layout by Ryan YuInteresting Layouts with CSS Grid by Miriam SuzanneBuild a Classic Layout FAST in CSS Grid by Miriam SuzanneAn Interactive Guide to CSS Grid by Josh Comeau🙏 A huge thank you to all the creators and advocates who’ve shared these valuable resources. Your work continues to inspire and empower the community.💌 Any feedback or just say Hi!I’d love to hear how I can improve this article for everyone. Drop me a comment below, or reach out on Bluesky or LinkedIn.If you enjoyed it, feel free to show some loveand stay tuned for more. Thank you!💜 🧙🏻‍♀️CSS Grid with Galaxy layout: now available in Figma was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story. #css #grid #with #galaxy #layout
    UXDESIGN.CC
    CSS Grid with Galaxy layout: now available in Figma
    CSS grid with Galaxy layout: now available in FigmaHow I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.1. The history of CSS gridBack in 2005, Bert Bos published the CSS3 Advanced Layout draft. After nearly two decades of work by the CSS Working Group and passionate advocates, CSS Grid has evolved into one of the most powerful layout systems for the web and developers have been using it in production for years.Now, in 2025, designers can finally experience CSS Grid directly in Figma. Hopefully, Figma will continue evolving to support all CSS properties, functions, data types, and values, so design and code can align even more seamlessly. 🤝✨2. Observe: bringing installation Art to the webTo show what’s possible, I will show you through how I used CSS Grid to recreate a large scale installation artwork on the web from concept to implementation. Galaxy (2016) is one of the signature works by Korean contemporary artist Kim Eull, consisting of 1,450 individual drawings. The moment I saw it, I knew it could be reimagined with CSS Grid.Galaxy, Installation, Kim Eull, 2016Galaxy, Installation, Kim Eull, 2016When I saw it, I thought it could be quite easy to re-create and visualise it using CSS Grid. 😎In summer © 2023 Disney and related entities. All Rights Reserved.But it was more complicated than I expected making the Galaxy layout in CSS Grid with 1,450 drawings 😅.The first draft grid drawingMy first draft involved sketching a rough grid layout inspired by the installation. From there, I defined the following design goals:🎯 Design GoalsThe grid container should resemble the Galaxy installation.It should be flexible and responsive across screen sizes.Each grid item should have a hover effect and link to its own content page.Each item must match the exact shape ratio (vertical, horizontal, square) of the original artwork.Specified properties and values for each grid item in WordPress so the client can easily choose and upload artwork for each grid item if he wishes to change it.⚙️ Image configurations in WordPressImage size: small, medium, largeShape: vertical rectangle, horizontal rectangle, square3. Research: CSS grid capabilities① Understand the CSS grid structureLet me briefly explain the basics of CSS Grid. Think of CSS Grid like an IKEA IVAR shelf: the container is the outer frame, and the items are the individual cells. Define the frame, decide the rows and columns, and then neatly arrange your content, just like organising your favourite shelf.IKEA IVAR © Inter IKEA Systems B.V. 1999–2023I hope this cheat sheet I made for this article helps you understand the CSS grid structure. 🧙🏻CSS Grid container and itemIVAR outer frame = grid container = parentEach cell = grid item = childCSS Grid TerminologyLine: horizontal or vertical divider (used to position items)Cell: the smallest unit of the gridTrack: the space between two lines (a row or a column)Area: a group of cells defined using grid-area② Find suitable propertiesAs you can see from the CSS Grid cheatsheet below, CSS Grid has many properties and values as well as various features. It was important to find suitable properties and values of CSS Grid for the Galaxy layout. I tried all properties and found grid-template containers and grid-area items worked best for the Galaxy layout.CSS Grid properties4. Make: Prototyping & Iterating① Sketch the layout by hand (now in Figma!)CSS Grid prototypingTo define grid-area values visually, I printed a grid and sketched the Galaxy layout by hand. Back then, Figma didn’t support grid layouts like it does now so I had to draw by hand. But now, thanks to Figma’s new Grid feature, you can map and plan layouts much more easily 🙌CSS Grid prototyping in FigmaThat said, while I really enjoyed using Figma Grid, I noticed a few limitations that made it tricky to recreate the Galaxy layout precisely.🚧 A Few Limitations in Figma GridRow and column gapsNo variable support for row/column gapsFigma only allows fixed px values for grid gaps, but I need to use primitive values from our design system library to ensure consistency across components and patterns. It would be great if Figma supported variables or design tokens for this.⚠️ Note: Gaps in CSS can use any length unit or percentage — but not fr.No visible line numbers in FigmaNo visible line numbersWhen placing images based on grid-area, it’s hard to know the exact row/column without indicators. This made it difficult to match my CSS layout precisely.Elements shift randomly when adding new imagesEvery time I added a new image, other elements jumped around unexpectedly. I had to manually re-align everything — bug or feature?Limited support for CSS grid propertiesEspecially for parent-level properties like justify-items, align-items, place-content, etc. Figma currently only supports basic alignment and fixed units. This limits the full expressive potential of CSS Grid.🙏 If you’ve found any tricks or tips for these challenges, I’d truly appreciate it if you shared them!Despite these challenges, I believe Figma will continue to evolve and support more CSS properties, functions, data types, and values, aligning design and code even more seamlessly. If you have tips for that, please share!Now, let’s go back to the process of building the Galaxy layout.② Numbering the grid linesI labeled each row and column in the sketch, these line numbers help define each grid item’s position using the grid-area shorthand.Numbering the grid linesAlso, we can inspect these numbers in the Chrome DevTools like below.CSS grid in Chrome DevTools③ Set the grid containerSet the grid container using grid-templateHere is the CSS code for the container. I used the repeat CSS function to create a certain number of columns and rows, grid-template shorthand with repeat() to create a 25×21 grid..container { display: grid; grid-template: repeat(25, 1fr) / repeat(21, 1fr);}Set the Grid Container: Repeat CSS function④ Define Grid ItemsNow I had 525 grid cells. To specify the grid item’s size and location for the Galaxy layout, I defined grid-area shorthand property for 29 items.grid-area value: row-start / column-start / row-end / column-endDefine grid itemsHere is the CSS code for the 29 items.//item position.item1 { grid-area: 2/6/8/9;}.item2 { grid-area: 3/9/6/11;}.item3 { grid-area: 1/11/6/14;}.......item27 { grid-area: 22/18/24/19;}.item28 { grid-area: 7/4/12/6;}.item29 { grid-area: 21/7/25/10;}Responsive CSS Grid test on CodePenThe grid-area CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. -MDNgrid-area - CSS: Cascading Style Sheets | MDN⑤ Insert Images into HTMLAs the final step, I selected artwork images that matched each grid item’s shape to avoid awkward cropping. One day, I hope we’ll have a CSS algorithm smart enough to auto-pick image ratios. 😉https://medium.com/media/7ffea08b5878827140665a540845a2e3/href5. Reflect: 3 Key LearningsAfter building the Galaxy layout with CSS Grid, I took a moment to reflect, just like in any good design process. Looking back helped me identify what worked, what surprised me, and what I’d do differently next time. Here are three insights that stood out:① Implicit grid vs Explicit gridAn implicit grid is automatically generated by the browser when items extend beyond the defined structure.An explicit grid is one you define manually using grid-template-columns and grid-template-rows.Understanding the difference helps you take full control of your layout.Comparing implicit and explicit grids in CSShttps://medium.com/media/25b574bf51ba75b81f31a1435d74c649/href👉 Watch: Wes Bos — Implicit vs Explicit Tracks② How height works in CSSThe height CSS property specifies the height of an element. By default, the property defines the height of the content area. -MDNThe height property controls an element’s vertical size.By default, it matches the height of the content inside.No content = no height100px content = 100px heighthttps://medium.com/media/2cf58e34fbb0c76baaee2454c9cc9c46/href③ fr units need explicit height💡 Height doesn’t update automatically like width does.Unlike columns, which adjust to screen width, rows using fr units don’t respond the same way. If the container has no defined height, the browser can’t calculate row heights, causing layout issues like the one shown below.fr units need explicit heightThe browser can’t calculate row heights, which can cause the layout to break unexpectedly, as shown bwhelow.The browser can’t calculate row heightsHeight doesn’t get updated automaticallyWhereas, even if there is no explicit width value in the block-level element specified, the browser automatically calculates the width value of the element by the browser size.Width gets updated automaticallyFor this reason, if you wanted to use fr unit in the grid-templage-rows property and takes up the entire height of the screen, you should put an explicit height on the container.Use fr unit in the grid-templage-rows property and takes up the entire height of the screen.container { height: 100vh; grid-template-row: repeat(6, 1fr);}https://medium.com/media/0d0238775bbfbe8ae34cf66acc89bcff/hrefEven now, I often forget CSS Grid properties when revisiting projects 😅. That’s why I created a CSS Grid Cheatsheet, a quick reference to help me remember and apply the right values fast.CSS Grid cheatsheet6. Resources to spark your imaginationDisclaimer: Parody of “I Can Be Anything” by Shinsuke Yoshitake, created by @nanacodesign for non-commercial, educational use. Original artwork © Shinsuke Yoshitake and/or its publishers.CSS Grid is far more powerful than just card layouts. Developers have explored it for years to create animations, 3D effects, and interactive designs with ease.To help you see what’s possible, I’ve collected some brilliant CodePen demos that show CSS Grid in action. These are real examples that you can explore, learn from, or adapt directly into your own projects:🕹️ CSS grid codepen collectionCSS grid codepen collection3D CSS Grid Exploding Stack by JheyIsometric eCommerce CSS Grid by Andy BarefootLayout Demo #10 — Rounded grid layout stacked: Rainbow by Mandy MichaelGenerative Kong Summit Patterns by Adam KuhnCountdown with grid css By Sergio AndradeKALEIDOSCOPE by LiamCSS Grid Ribbon layout by Andy BarefootAnimated CSS Grid (grid-template-rows / grid-template-columns) by BramusCSS Grid: Monopoly (Harry Potter Edition) by Olivia NgCSS Grid Responsive Perspective layout by Andy BarefootTriangle Grid with nth-child #CodePenChallenge by Stephen LeeResponsive Mondrian Art with CSS Grid by Ryan Yu📚 ResourcesConfig 2025: Structure your designs with Figma Grid, a new way to use auto layoutFigma’s new grid — you must understand CSS Grid as a designer by Christine VallaureA Complete Guide to CSS Grid | CSS-Tricks by Chris HouseCSS Grid Course by Wes BosGrid by example by Rachel AndrewCSS Grid Basics by Jen SimmonsWeb.dev > Learn CSS > GridMozilla > CSS Grid LayoutInspect CSS grid layoutsResponsive Card Grid Layout by Ryan YuInteresting Layouts with CSS Grid by Miriam SuzanneBuild a Classic Layout FAST in CSS Grid by Miriam SuzanneAn Interactive Guide to CSS Grid by Josh Comeau🙏 A huge thank you to all the creators and advocates who’ve shared these valuable resources. Your work continues to inspire and empower the community.💌 Any feedback or just say Hi!I’d love to hear how I can improve this article for everyone. Drop me a comment below, or reach out on Bluesky or LinkedIn.If you enjoyed it, feel free to show some love (👏) and stay tuned for more. Thank you!💜 🧙🏻‍♀️CSS Grid with Galaxy layout: now available in Figma was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
    0 Comments 0 Shares
  • #333;">By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius' Eruption

    New Research
    By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius’ Eruption
    Archaeologists are learning new details about the four individuals’ futile attempt to hide inside an ancient residence called the House of Helle and Phrixus

    A bed frame shoved against the door served as a makeshift barricade.
    Pompeii Archaeological Park
    In 79 C.E., Mount Vesuvius erupted, spewing ash and small volcanic pellets known as lapilli over the city of Pompeii.
    Nearly 1,950 years later, archaeologists are still sifting through the layers of debris and making remarkable discoveries about life—and death—in the ancient city.
    Researchers recently discovered four members of a family, including a child, who attempted to escape the eruption by barricading themselves inside a bedroom, according to a statement from the Pompeii Archaeological Park.
    Though their efforts were futile, their remains provide remarkable insight into the doomed city’s final moments.
    When the eruption began, most residents of Pompeii “had no clue what was happening,” Gabriel Zuchtriegel, director of the park and co-author of a new study published in the journal Scavi di Pompei, tells the New York Times’ Sara Novak.
    “Many thought the end of the world had come.”
    A majority of the 15,000 to 20,000 residents of Pompeii and nearby Herculaneum fled and survived the eruption.
    The four family members were among the roughly 2,000 Pompeians who remained when the city was destroyed.

    As Helle struggles in the sea, Phrixus reaches out to his sister from atop a flying ram.


    Pompeii Archaeological Park
    Archaeologists found the family’s remains in a small but stately residence known as the House of Helle and Phrixus, named after a fresco of the mythological siblings discovered on the dining room wall.
    In Greek myth, the siblings survive their stepmother’s attempt to sacrifice them to the gods by flying away on a ram with a golden fleece.
    While Phrixus escapes, Helle falls off the ram into the sea.
    The fresco captures the siblings reaching out to each other—Helle in the sea, Phrixus on the ram—in a fittingly futile attempt at rescue.
    The architectural features of the house may have accelerated the family’s demise.
    Like many Roman houses, the House of Helle and Phrixus featured an open-roofed atrium, intended to aid rainwater collection.
    But as lapilli fell from the sky during the first phase of the eruption, the rock debris, which reached up to nine feet in some locations, quickly flooded the house through the atrium.
    At first, the archaeological evidence shows, the four individuals tried to protect themselves by packing into a small room.
    They even pushed a wooden bed frame against the door, hoping that it would prevent the lapilli from entering.When that failed, the researchers think they pulled back the barricade and attempted to escape.
    Based on the location of the remains, they only got as far as the triclinium, or dining room.
    “This house, with its decorations and its objects, shows us people who tried to save themselves,” says Zuchtriegel in the statement, per a translation by La Brújula Verde’s Guillermo Carvajal.
    “They didn’t succeed, but their story is still here, beneath the ashes.”
    Over the centuries, the ash preserved the remains of the family, the wooden bed frame and other items, including a bronze amulet known as a bulla and a stash of amphorae filled with garum, a popular Roman fish sauce.

    Ash and lapilli flooded into through the open-roofed atrium, burying the house in up to nine feet of debris.


    Pompeii Archaeological Park
    Researchers don’t know that this particular family owned the House of Helle and Phrixus.
    The group may have taken refuge there after the owners fled, as Marcello Mogetta, an archaeologist and Roman art historian at the University of Missouri who wasn’t involved in the study, tells the Times.
    Still, the recovered objects offer a glimpse into Pompeian family life.
    For instance, the child was likely the one wearing the bronze bulla, as tradition dictated that boys wear such amulets for protection until adulthood.
    Additionally, traces of masonry materials suggest that the house was under renovation.
    As Zuchtriegel says in the statement, “Excavating Pompeii means confronting the beauty of art, but also the fragility of life.”
    Get the latest stories in your inbox every weekday.
    #0066cc;">#shoving #bed #frame #against #the #door #this #pompeii #family #tried #survive #mount #vesuvius039 #eruption #new #researchby #vesuvius #eruptionarchaeologists #are #learning #details #about #four #individuals #futile #attempt #hide #inside #ancient #residence #called #house #helle #and #phrixus #shoved #served #makeshift #barricade #archaeological #parkin #vesuviuserupted #spewing #ash #small #volcanic #pellets #known #aslapilli #over #city #ofpompeiinearly #years #later #archaeologists #still #sifting #through #layers #debris #making #remarkable #discoveries #lifeand #deathin #cityresearchers #recently #discovered #members #including #child #who #attempted #escape #barricading #themselves #bedroom #according #astatement #from #thepompeii #parkthough #their #efforts #were #remains #provide #insight #into #doomed #citys #final #momentswhen #began #most #residents #had #clue #what #was #happeninggabriel #zuchtriegel #director #park #coauthor #study #published #journalscavi #pompei #tells #thenew #york #times #sara #novakmany #thought #end #world #comea #majority #nearby #herculaneumfled #survived #eruptionthe #among #roughly #pompeians #remained #when #destroyed #struggles #seaphrixus #reaches #out #his #sister #atop #flying #ram #parkarchaeologists #found #familys #but #stately #named #after #afresco #mythological #siblings #dining #room #wallin #greek #myth #stepmothers #sacrifice #them #gods #away #with #golden #fleecewhile #escapes #falls #off #seathe #fresco #captures #reaching #each #otherhelle #sea #ramin #fittingly #rescuethe #architectural #features #may #have #accelerated #demiselike #many #roman #houses #featured #openroofed #atrium #intended #aid #rainwater #collectionbut #lapilli #fell #sky #during #first #phase #rock #which #reached #nine #feet #some #locations #quickly #flooded #atriumat #evidence #shows #protect #packing #roomthey #even #pushed #wooden #hoping #that #would #prevent #enteringwhen #failed #researchers #think #they #pulled #back #escapebased #location #only #got #far #triclinium #roomthis #its #decorations #objects #people #save #says #statement #per #translation #byla #brújula #verdes #guillermo #carvajalthey #didnt #succeed #story #here #beneath #ashesover #centuries #preserved #other #items #bronze #amulet #abulla #stash #amphorae #filled #garum #apopular #fish #sauce #burying #parkresearchers #dont #know #particular #owned #phrixusthe #group #taken #refuge #there #owners #fled #marcello #mogetta #archaeologist #art #historian #university #missouri #wasnt #involved #timesstill #recovered #offer #glimpse #pompeian #lifefor #instance #likely #one #wearing #bulla #tradition #dictated #boys #wear #such #amulets #for #protection #until #adulthoodadditionally #traces #masonry #materials #suggest #under #renovationas #excavating #means #confronting #beauty #also #fragility #lifeget #latest #stories #your #inbox #every #weekday
    By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius' Eruption
    New Research By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius’ Eruption Archaeologists are learning new details about the four individuals’ futile attempt to hide inside an ancient residence called the House of Helle and Phrixus A bed frame shoved against the door served as a makeshift barricade. Pompeii Archaeological Park In 79 C.E., Mount Vesuvius erupted, spewing ash and small volcanic pellets known as lapilli over the city of Pompeii. Nearly 1,950 years later, archaeologists are still sifting through the layers of debris and making remarkable discoveries about life—and death—in the ancient city. Researchers recently discovered four members of a family, including a child, who attempted to escape the eruption by barricading themselves inside a bedroom, according to a statement from the Pompeii Archaeological Park. Though their efforts were futile, their remains provide remarkable insight into the doomed city’s final moments. When the eruption began, most residents of Pompeii “had no clue what was happening,” Gabriel Zuchtriegel, director of the park and co-author of a new study published in the journal Scavi di Pompei, tells the New York Times’ Sara Novak. “Many thought the end of the world had come.” A majority of the 15,000 to 20,000 residents of Pompeii and nearby Herculaneum fled and survived the eruption. The four family members were among the roughly 2,000 Pompeians who remained when the city was destroyed. As Helle struggles in the sea, Phrixus reaches out to his sister from atop a flying ram. Pompeii Archaeological Park Archaeologists found the family’s remains in a small but stately residence known as the House of Helle and Phrixus, named after a fresco of the mythological siblings discovered on the dining room wall. In Greek myth, the siblings survive their stepmother’s attempt to sacrifice them to the gods by flying away on a ram with a golden fleece. While Phrixus escapes, Helle falls off the ram into the sea. The fresco captures the siblings reaching out to each other—Helle in the sea, Phrixus on the ram—in a fittingly futile attempt at rescue. The architectural features of the house may have accelerated the family’s demise. Like many Roman houses, the House of Helle and Phrixus featured an open-roofed atrium, intended to aid rainwater collection. But as lapilli fell from the sky during the first phase of the eruption, the rock debris, which reached up to nine feet in some locations, quickly flooded the house through the atrium. At first, the archaeological evidence shows, the four individuals tried to protect themselves by packing into a small room. They even pushed a wooden bed frame against the door, hoping that it would prevent the lapilli from entering.When that failed, the researchers think they pulled back the barricade and attempted to escape. Based on the location of the remains, they only got as far as the triclinium, or dining room. “This house, with its decorations and its objects, shows us people who tried to save themselves,” says Zuchtriegel in the statement, per a translation by La Brújula Verde’s Guillermo Carvajal. “They didn’t succeed, but their story is still here, beneath the ashes.” Over the centuries, the ash preserved the remains of the family, the wooden bed frame and other items, including a bronze amulet known as a bulla and a stash of amphorae filled with garum, a popular Roman fish sauce. Ash and lapilli flooded into through the open-roofed atrium, burying the house in up to nine feet of debris. Pompeii Archaeological Park Researchers don’t know that this particular family owned the House of Helle and Phrixus. The group may have taken refuge there after the owners fled, as Marcello Mogetta, an archaeologist and Roman art historian at the University of Missouri who wasn’t involved in the study, tells the Times. Still, the recovered objects offer a glimpse into Pompeian family life. For instance, the child was likely the one wearing the bronze bulla, as tradition dictated that boys wear such amulets for protection until adulthood. Additionally, traces of masonry materials suggest that the house was under renovation. As Zuchtriegel says in the statement, “Excavating Pompeii means confronting the beauty of art, but also the fragility of life.” Get the latest stories in your inbox every weekday.
    #shoving #bed #frame #against #the #door #this #pompeii #family #tried #survive #mount #vesuvius039 #eruption #new #researchby #vesuvius #eruptionarchaeologists #are #learning #details #about #four #individuals #futile #attempt #hide #inside #ancient #residence #called #house #helle #and #phrixus #shoved #served #makeshift #barricade #archaeological #parkin #vesuviuserupted #spewing #ash #small #volcanic #pellets #known #aslapilli #over #city #ofpompeiinearly #years #later #archaeologists #still #sifting #through #layers #debris #making #remarkable #discoveries #lifeand #deathin #cityresearchers #recently #discovered #members #including #child #who #attempted #escape #barricading #themselves #bedroom #according #astatement #from #thepompeii #parkthough #their #efforts #were #remains #provide #insight #into #doomed #citys #final #momentswhen #began #most #residents #had #clue #what #was #happeninggabriel #zuchtriegel #director #park #coauthor #study #published #journalscavi #pompei #tells #thenew #york #times #sara #novakmany #thought #end #world #comea #majority #nearby #herculaneumfled #survived #eruptionthe #among #roughly #pompeians #remained #when #destroyed #struggles #seaphrixus #reaches #out #his #sister #atop #flying #ram #parkarchaeologists #found #familys #but #stately #named #after #afresco #mythological #siblings #dining #room #wallin #greek #myth #stepmothers #sacrifice #them #gods #away #with #golden #fleecewhile #escapes #falls #off #seathe #fresco #captures #reaching #each #otherhelle #sea #ramin #fittingly #rescuethe #architectural #features #may #have #accelerated #demiselike #many #roman #houses #featured #openroofed #atrium #intended #aid #rainwater #collectionbut #lapilli #fell #sky #during #first #phase #rock #which #reached #nine #feet #some #locations #quickly #flooded #atriumat #evidence #shows #protect #packing #roomthey #even #pushed #wooden #hoping #that #would #prevent #enteringwhen #failed #researchers #think #they #pulled #back #escapebased #location #only #got #far #triclinium #roomthis #its #decorations #objects #people #save #says #statement #per #translation #byla #brújula #verdes #guillermo #carvajalthey #didnt #succeed #story #here #beneath #ashesover #centuries #preserved #other #items #bronze #amulet #abulla #stash #amphorae #filled #garum #apopular #fish #sauce #burying #parkresearchers #dont #know #particular #owned #phrixusthe #group #taken #refuge #there #owners #fled #marcello #mogetta #archaeologist #art #historian #university #missouri #wasnt #involved #timesstill #recovered #offer #glimpse #pompeian #lifefor #instance #likely #one #wearing #bulla #tradition #dictated #boys #wear #such #amulets #for #protection #until #adulthoodadditionally #traces #masonry #materials #suggest #under #renovationas #excavating #means #confronting #beauty #also #fragility #lifeget #latest #stories #your #inbox #every #weekday
    WWW.SMITHSONIANMAG.COM
    By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius' Eruption
    New Research By Shoving a Bed Frame Against the Door, This Pompeii Family Tried to Survive Mount Vesuvius’ Eruption Archaeologists are learning new details about the four individuals’ futile attempt to hide inside an ancient residence called the House of Helle and Phrixus A bed frame shoved against the door served as a makeshift barricade. Pompeii Archaeological Park In 79 C.E., Mount Vesuvius erupted, spewing ash and small volcanic pellets known as lapilli over the city of Pompeii. Nearly 1,950 years later, archaeologists are still sifting through the layers of debris and making remarkable discoveries about life—and death—in the ancient city. Researchers recently discovered four members of a family, including a child, who attempted to escape the eruption by barricading themselves inside a bedroom, according to a statement from the Pompeii Archaeological Park. Though their efforts were futile, their remains provide remarkable insight into the doomed city’s final moments. When the eruption began, most residents of Pompeii “had no clue what was happening,” Gabriel Zuchtriegel, director of the park and co-author of a new study published in the journal Scavi di Pompei, tells the New York Times’ Sara Novak. “Many thought the end of the world had come.” A majority of the 15,000 to 20,000 residents of Pompeii and nearby Herculaneum fled and survived the eruption. The four family members were among the roughly 2,000 Pompeians who remained when the city was destroyed. As Helle struggles in the sea, Phrixus reaches out to his sister from atop a flying ram. Pompeii Archaeological Park Archaeologists found the family’s remains in a small but stately residence known as the House of Helle and Phrixus, named after a fresco of the mythological siblings discovered on the dining room wall. In Greek myth, the siblings survive their stepmother’s attempt to sacrifice them to the gods by flying away on a ram with a golden fleece. While Phrixus escapes, Helle falls off the ram into the sea. The fresco captures the siblings reaching out to each other—Helle in the sea, Phrixus on the ram—in a fittingly futile attempt at rescue. The architectural features of the house may have accelerated the family’s demise. Like many Roman houses, the House of Helle and Phrixus featured an open-roofed atrium, intended to aid rainwater collection. But as lapilli fell from the sky during the first phase of the eruption, the rock debris, which reached up to nine feet in some locations, quickly flooded the house through the atrium. At first, the archaeological evidence shows, the four individuals tried to protect themselves by packing into a small room. They even pushed a wooden bed frame against the door, hoping that it would prevent the lapilli from entering.When that failed, the researchers think they pulled back the barricade and attempted to escape. Based on the location of the remains, they only got as far as the triclinium, or dining room. “This house, with its decorations and its objects, shows us people who tried to save themselves,” says Zuchtriegel in the statement, per a translation by La Brújula Verde’s Guillermo Carvajal. “They didn’t succeed, but their story is still here, beneath the ashes.” Over the centuries, the ash preserved the remains of the family, the wooden bed frame and other items, including a bronze amulet known as a bulla and a stash of amphorae filled with garum, a popular Roman fish sauce. Ash and lapilli flooded into through the open-roofed atrium, burying the house in up to nine feet of debris. Pompeii Archaeological Park Researchers don’t know that this particular family owned the House of Helle and Phrixus. The group may have taken refuge there after the owners fled, as Marcello Mogetta, an archaeologist and Roman art historian at the University of Missouri who wasn’t involved in the study, tells the Times. Still, the recovered objects offer a glimpse into Pompeian family life. For instance, the child was likely the one wearing the bronze bulla, as tradition dictated that boys wear such amulets for protection until adulthood. Additionally, traces of masonry materials suggest that the house was under renovation. As Zuchtriegel says in the statement, “Excavating Pompeii means confronting the beauty of art, but also the fragility of life.” Get the latest stories in your inbox every weekday.
    0 Comments 0 Shares