The Multifunctional Art Center of Lhozhag County Middle School / Shenzhen Huahui DesignSave this picture!© Right Angle ImageVisual Arts Center•Shannan, China Architects: Shenzhen Huahui Design Area Area of this architecture project Area:  6009 m² Year Completion year of this architecture project Year:  2024 Photographs Photographs:Right Angle Image Lead Architects: XIAO Cheng More SpecsLess Specs Save this picture! Text description provided by the architects. The site of our multifunctional art center project is located within Lhozhag Middle School, the county's junior high campus. Funded and built by COFCO Group, the project aims to create a composite art education space that serves as a cross-cultural exchange venue for school staff and students, local residents, international tourists, and artists visiting Tibet.Save this picture!Save this picture!The Weaving and Reconstruction of the Landscape. The site of Lhozhag County Middle School is situated with the mountains to the south and a road to the north. Beyond the road lies a martyrs' memorial square, and further north are National Highway 219 and the Lhozhag Gorge. The campus has undergone construction in different periods, resulting in a fragmented layout dominated by dispersed linear buildings. This has prevented the formation of a cohesive spatial order. Therefore, one of our key objectives is to take this opportunity to reorganize and construct a more organic relationship between the elements of the site. Additionally, the site has a noticeable elevation difference, which, if utilized properly, offers the potential to create more dynamic and engaging spaces.Save this picture!Save this picture!Given the limited area of the site, the design adopts an "embedded" strategy. The first step involves demolishing the existing staff activity room directly facing the school entrance and incorporating it into the new building volume. This move creates a continuous central axis through the campus. The new building is arranged in a compact L-shaped mass at the southern end of this axis, forming a spatial sequence that connects the main entrance of the campus, the front yard, and the small plaza at the entrance to the multifunctional art center. When viewed on a larger scale, the multifunctional center to the south, facing the mountains, and the memorial square to the north, facing the water, create an urban spatial axis within the limited depth of the southern part of Lhozhag County.Save this picture!Save this picture!Massing Configuration and Spatial Morphology. Situated at the northern foothills of a south-facing mountain slope, the project site is constrained by limited space towards the south, making optimal natural daylighting from this direction difficult to achieve. In response, the design incorporates various forms of skylights to maximize solar utilization. The main structure of the Multi-Functional Center is composed of two primary volumes—one linear and one cubic. The elongated volume is organized in a "sandwich-like" spatial configuration, consisting of two solid masses and a narrow central atrium. Flanking the double-height skylit atrium—serving as a hub for circulation, exhibitions, and gatherings—are small-scale spaces housing art classrooms and studios. The square volume contains a 700-seat auditorium, with a skylit side hall designed along its lateral facade.Save this picture!Save this picture!Save this picture!These two volumes are arranged in a near-perpendicular relationship, a deliberate response to both the site's spatial axis and the surrounding buildings. Considering the site's topography, a subtle elevation difference is established between the two forms. The roof of the auditorium becomes a highly accessible outdoor activity platform. On this rooftop, several small, south-facing structures with windows are designed to offer engaging and playful spaces for students' extracurricular activities. Between the main building's southern edge and the northward-sloping mountain base lies a narrow wedge-shaped courtyard, functioning as a "miniature gorge" between architecture and terrain—an extension of both outdoor exhibition areas and indoor activity spaces.Save this picture!Save this picture!Save this picture!Low-Tech Construction and Contextual Integration. Our intention was to express the project's sense of place through a distilled contemporary architectural language—one that remains restrained and respectful in its articulation. The surrounding context—both its unrefined natural landscape and the neighboring built forms—exudes a raw, elemental force that speaks to the site's primal character. Each day, the children's recitations echo through the arms of the mountains, mingling with the distant sound of the Lhozhag Valley stream. I envisioned the new building as a stone emerging from the mountain itself—something that sparks curiosity while also evoking a quiet familiarity. It is curious in the way it appears as a white "magic box" filled with intriguing spatial experiences; yet familiar in its subtle dialogue with the surrounding built environment, sharing a common architectural language. This "stone" is firmly grounded in the land—solid, steady, and reassuring.Save this picture!Save this picture!At the main entrance façade, we designed what could be described as a "Mondrian frame" for Lhozhag. Through a composition of solids and voids, light and reflection, the façade glass is broken down into mirrored panels of varying sizes and hues. These reflections—of the sky, the snow-capped peaks, the building, and the children themselves—create a sense of "familiar strangeness", subtly provoking curiosity and encouraging exploration in their daily routines.Construction methods employ conventional, locally executable techniques, prioritizing recyclable regional materials. Skylight configurations enhance natural daylighting and thermal mass performance, significantly reducing heating energy use in winter.Save this picture!Save this picture!The Canyon of Light. The "Light Canyon Atrium" serves as the spiritual and spatial core of the entire building. It is both an abstract interpretation of Lhozhag's dramatic natural terrain and a contemporary reimagining of the essential qualities of traditional Tibetan architecture. (Diagram: Spatial Archetype) Inspired by the idea that "sunlight breathes life into the canyon, where daily routines unfold", the design celebrates this raw, vibrant energy through spatial scale, light quality, and chromatic composition.Save this picture!Save this picture!Upon entering from the foyer, one ascends a multipurpose stepped platform to the second floor and then turns—only to be met with a breathtaking atrium measuring 60 meters in length, 7 meters in width, and 14 meters in height. This vertical void captures abundant daylight from above, extending across the building to link diverse functional zones. It gathers the distant landscape into its frame, forging a dialogue between interior and exterior, architecture and nature. The experience is ever-changing—one may pass through, pause, encounter, gaze into or out of it—each movement revealing new spatial surprises. Witnessing children in colorful attire moving through the longitudinally unfolding space, where the indoor sky seamlessly merges with the real one beyond, and distant mountains appear to embrace the end of the axis, the envisioned scenarios have materialized as intended.Save this picture!Save this picture!Here, light is "combed" through a kaleidoscopic filter—a gesture that feels uniquely appropriate to Tibet's vivid natural palette. White walls act as canvases for sunlight's seasonal performances, while solid-colored interior corridors peek through varying-sized apertures, adding layers of visual liveliness. Ultimately, the "Canyon of Light" became the guiding concept of the entire project. Through a dialogue between architecture and environment, and a fusion of tradition and modernity, the project creates a space that is both functional and poetic—an iconic centerpiece for Lhozhag County Middle School and a cultural threshold for exchange between campus and community. Yet above all, we hope the true owners of the space are the students themselves. On holidays, when children in traditional Tibetan dress gather here to play and laugh, the scene feels so naturally harmonious that it evokes a beautiful illusion: as if this building has always been here， growing with the children, quietly witnessing the passage of time.Save this picture!The "Roots" and "Wings" of Culture. The 2017 Pritzker Prize-winning Spanish firm RCR Arquitectes articulated a profound view on locality: "We believe that harmony with nature means that architecture must deeply understand its surrounding environment. While we embrace globalization, we hope our architecture remains firmly rooted in its place. We often say that architecture needs both 'roots' and 'wings.' The three of us each have our own origin, something intrinsic that resides within us. Even as we move from one place to another, this origin remains unchanged—it is the product of a place, a climate, and a culture. The world is becoming increasingly interconnected, but we believe that understanding and respecting these origins is essential. They enrich the shared creative force that expresses who we are, and that is deeply important."Save this picture!In Lhozhag, the younger generation navigates a cultural tug-of-war: between their deep Tibetan heritage and the currents of modernity. Like the mirrored facades that reflect distant snow-capped mountains, village rooftops, ancient monasteries, and colorful prayer flags by day—with the children's own figures merging into these scenes—the architecture becomes a metaphor for cultural identity. "Who are you?" "Where do your roots lie?" When they see themselves in these reflections, they encounter both their homeland and the coexistence of their culture with the wider world. Through architectural language, the project aims to show that they need not choose between tradition and modernity but can balance both—rooted in their cultural soil while courageously reaching outward. May the light of the canyon forever illuminate the path in these children's hearts.Save this picture! Project gallerySee allShow less Project locationAddress:Shannan, ChinaLocation to be used only as a reference. It could indicate city/country but not exact address.About this office MaterialsGlassConcreteMaterials and TagsGlass

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.

Colorful Grid Painting by Piet Mondrian Fetches $47.6 Million at Auction While it went for well below the auction house’s estimate, “Composition With Large Red Plane, Bluish Gray, Yellow, Black and Blue” is now the Dutch artist’s third highest-selling work Lillian Ali - Staff Contributor May 16, 2025 2:23 p.m. Composition With Large Red Plane, Bluish Gray, Yellow, Black and Blue, Piet Mondrian, 1922 Christie's A 1922 painting by Piet Mondrian fetched $47.6 million at auction, becoming the Dutch artist’s third highest-selling work. Titled Composition With Large Red Plane, Bluish Gray, Yellow, Black and Blue, the artwork features Mondrian’s signature grid-like patterns and bright colors, including a large red square. Experts at Christie’s had expected it to sell for around $50 million. “Red always helps, simple as it is, because it’s a color people like,” Alex Rotter, Christie’s president, tells the Wall Street Journal’s Kelly Crow. If it had sparked a bidding war, it could have broken the artist’s auction record of $51 million, set by Composition No. II Composition No. II, Piet Mondrian, 1930 Alexi Rosenfeld / Getty Images However, the May 12 auction attracted only one bidder, who purchased the piece for $41 million (or $47.6 million with fees). “It’s a fantastic picture,” Hugo Nathan of the art advisory Beaumont Nathan tells Artnet’s Katya Kazakina. “But the market at those very high levels is quite tricky.” Born in the Netherlands in 1872, Mondrian began his artistic career by painting landscapes and Cubist works. However, he’s famous for the style he developed in the 1920s, when he was in his 40s and 50s. His best-known pieces feature clean lines, eye-popping colors and abstract canvases filled with geometric shapes. “While prevailing artistic trends in post-war Europe favored a return to figuration and classical ideals, Mondrian pursued his own unique form of pure abstraction—a groundbreaking and thoroughly modern approach to painting in service of the creation of a universal visual language,” Vanessa Fusco, head of Impressionist and modern art at Christie’s, says in a statement. Composition With Large Red Plane, Bluish Gray, Yellow, Black and Blue had belonged to Louise Riggio, the wife of Barnes & Noble founder Leonard Riggio. Christie’s secured the collection by offering the Riggio estate an undisclosed guarantee, promising a minimum price regardless of the auction’s success. To offset its own risk, Christie’s arranged for outside buyers to place pre-sale bids on certain lots. For that reason, many lots didn’t have “a bounce,” or more bidding following a first bid, Rotter tells Artnet. “We had to manage our risk portfolio,” Rotter says. “This is the art market in the real world.” One of those one-bid lots was the Mondrian composition, which appears to have been purchased by its guarantor. In total, the Riggio collection made $272 million, including fees. Without fees, though, the sale fell short of Christie’s $252 million estimate, according to the New York Times’ Zachary Small and Tim F. Schneider. Many of the guarantees placed lots below their estimated values. For example, Pablo Picasso’s Mère et Enfant (1922) sold for $6 million, though it was expected to fetch at least $9 million. Speaking to Artnet, art adviser Ralph DeLuca describes these “low-margin” third-party guarantees as “blood sport.” However, some experts think the Mondrian’s price tag was inflated to begin with. “Overpricing at the start was a deterrent with many collectors, despite the quality and rarity of the work,” art dealer Brett Gorvy tells the Times. Get the latest stories in your inbox every weekday.