• Dans un monde où les histoires emblématiques perdurent, la déception s'immisce lorsque James Gunn déclare qu'il ne veut plus revoir certaines origines. Chaque récit emblématique, chaque larme versée, semblent maintenant s'effacer, laissant place à un vide amer. Ce sentiment de solitude, où l'on se rend compte que même les héros peuvent être oubliés, pèse lourd sur le cœur. Lorsque la nouveauté se profile à l'horizon, est-ce que cela signifie qu'on abandonne ce qui nous a toujours touchés ? Les souvenirs des origines se fanent, et avec eux, une part de notre âme.

    #Déception #Solitude #Héros #JamesGunn #DCStudios
    Dans un monde où les histoires emblématiques perdurent, la déception s'immisce lorsque James Gunn déclare qu'il ne veut plus revoir certaines origines. Chaque récit emblématique, chaque larme versée, semblent maintenant s'effacer, laissant place à un vide amer. Ce sentiment de solitude, où l'on se rend compte que même les héros peuvent être oubliés, pèse lourd sur le cœur. Lorsque la nouveauté se profile à l'horizon, est-ce que cela signifie qu'on abandonne ce qui nous a toujours touchés ? Les souvenirs des origines se fanent, et avec eux, une part de notre âme. #Déception #Solitude #Héros #JamesGunn #DCStudios
    KOTAKU.COM
    James Gunn Never Wants To See These Iconic Origin Stories Again
    James Gunn has had enough. Less than three years after he was announced as the new co-CEO of DC Studios, the comic book nerd with the Warner Bros.-sized checkbook is ready to usher in his new era of the DCU with the July 11 release of Superman. And i
    1 Comments 0 Shares 0 Reviews
  • ClickGUARD Inc.: Senior Full Stack Developer (React.js & Node.js)

    We’re seeking a Senior Full Stack Developer who’s equally comfortable scaling infrastructure, architecting elegant APIs, and obsessing over clean, intuitive UIs. You’ll work on mission-critical systems in a fast-paced, product-led SaaS company that thrives in a competitive digital marketing space. The ideal candidate will have a deep understanding of frontend and backend technologies, along with hands-on experience in MongoDB, Google Cloud Platform, and Kubernetes.Key ResponsibilitesFrontendResponsibilitiesBuild dynamic, responsive, and reusable UI components using React.js.Write well-structured, maintainable, and testable code following modern JavaScriptand TypeScript standards.Implement responsive designs using CSS3, SCSS, TailwindCSS, or Material-UI.Work closely with UI/UX designers to implement clean and user-friendly interfaces.Optimize frontend performance for fast loading and smooth interactions.Integrate RESTful and GraphQL APIs.Handle SSRand client-side rendering efficiently.BackendResponsibilitiesDesign and develop scalable APIs and microservices using Node.js and Express.js.Implement middleware, authentication, authorization, and secure session management.Manage asynchronous jobs, queues, and background tasks using tools like BullMQPerform error handling, logging, and monitoring.Implement caching strategies using Redis or in-memory stores.Ensure backend performance, scalability, and security best practices.Database and StorageDesign, manage, and optimize MongoDB schemas using Mongoose.Perform data modeling, aggregation, indexing, and query optimization for high-performance applications.Handle backups, migration scripts, and versioning of data layers.DevOps, Cloud & InfrastructureCompute Engine, Cloud Run, Cloud Storage, Cloud Pub/Sub, and Cloud Monitoring.Containerize applications using Docker, and orchestrate deployments using Kubernetes.Implement CI/CD pipelines using GitHub Actions, Cloud Build, or Jenkins.Ensure infrastructure reliability, scalability, and security.About the RoleThis is a full-stack engineering position with ownership of both frontend and backend architectureYou’ll contribute directly to building product experiences that solve real customer pain pointsYou’ll work in a fast-paced, product-led company focused on growth, speed, and measurable resultsWe expect strong technical problem-solving, a collaborative mindset, and a bias for actionYou’ll play a key role in building and scaling systems for high-performance and usabilityWhat We’re Looking For5+ years of hands-on experience in JavaScript/TypeScript, React.js, and Node.jsStrong understanding of MongoDB, Mongoose, and NoSQL data modelingExperience with Docker, Kubernetes, and GCP for cloud-native deploymentsFamiliarity with RESTful APIs, GraphQL, and real-time communication via WebSocketsAbility to design clean, intuitive user interfaces and optimize user flowsStrong debugging, problem-solving, and performance tuning skillsComfortable working in fast-moving environments with shifting prioritiesBonus: Experience with Next.js, event-driven systems, or AdTech/MarTech productsWhat’s in it for you?Competitive salary  - Compensation that reflects your expertise and contributions.High-impact role  – You’ll be leading product decisions in a company that values speed, innovation, and customer obsession.Hands-on environment 🛠 – We operate lean, so your contributions will be direct and meaningful.Fast-growing industry  – AdTech / MarTech is a quickly evolving space, making this an exciting space to be in.If you’re passionate about building world-class software, delivering real value to users, and thriving in a fast-paced product-led environment— we’d love to hear from you!All qualified applicants will receive consideration for employment without regard to sex, gender identity, sexual orientation, race, color, religion, national origin, disability, protected veteran status, age, or any other characteristic.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot
    #clickguard #inc #senior #full #stack
    ClickGUARD Inc.: Senior Full Stack Developer (React.js & Node.js)
    We’re seeking a Senior Full Stack Developer who’s equally comfortable scaling infrastructure, architecting elegant APIs, and obsessing over clean, intuitive UIs. You’ll work on mission-critical systems in a fast-paced, product-led SaaS company that thrives in a competitive digital marketing space. The ideal candidate will have a deep understanding of frontend and backend technologies, along with hands-on experience in MongoDB, Google Cloud Platform, and Kubernetes.Key ResponsibilitesFrontendResponsibilitiesBuild dynamic, responsive, and reusable UI components using React.js.Write well-structured, maintainable, and testable code following modern JavaScriptand TypeScript standards.Implement responsive designs using CSS3, SCSS, TailwindCSS, or Material-UI.Work closely with UI/UX designers to implement clean and user-friendly interfaces.Optimize frontend performance for fast loading and smooth interactions.Integrate RESTful and GraphQL APIs.Handle SSRand client-side rendering efficiently.BackendResponsibilitiesDesign and develop scalable APIs and microservices using Node.js and Express.js.Implement middleware, authentication, authorization, and secure session management.Manage asynchronous jobs, queues, and background tasks using tools like BullMQPerform error handling, logging, and monitoring.Implement caching strategies using Redis or in-memory stores.Ensure backend performance, scalability, and security best practices.Database and StorageDesign, manage, and optimize MongoDB schemas using Mongoose.Perform data modeling, aggregation, indexing, and query optimization for high-performance applications.Handle backups, migration scripts, and versioning of data layers.DevOps, Cloud & InfrastructureCompute Engine, Cloud Run, Cloud Storage, Cloud Pub/Sub, and Cloud Monitoring.Containerize applications using Docker, and orchestrate deployments using Kubernetes.Implement CI/CD pipelines using GitHub Actions, Cloud Build, or Jenkins.Ensure infrastructure reliability, scalability, and security.About the RoleThis is a full-stack engineering position with ownership of both frontend and backend architectureYou’ll contribute directly to building product experiences that solve real customer pain pointsYou’ll work in a fast-paced, product-led company focused on growth, speed, and measurable resultsWe expect strong technical problem-solving, a collaborative mindset, and a bias for actionYou’ll play a key role in building and scaling systems for high-performance and usabilityWhat We’re Looking For5+ years of hands-on experience in JavaScript/TypeScript, React.js, and Node.jsStrong understanding of MongoDB, Mongoose, and NoSQL data modelingExperience with Docker, Kubernetes, and GCP for cloud-native deploymentsFamiliarity with RESTful APIs, GraphQL, and real-time communication via WebSocketsAbility to design clean, intuitive user interfaces and optimize user flowsStrong debugging, problem-solving, and performance tuning skillsComfortable working in fast-moving environments with shifting prioritiesBonus: Experience with Next.js, event-driven systems, or AdTech/MarTech productsWhat’s in it for you?Competitive salary 💰 - Compensation that reflects your expertise and contributions.High-impact role 🚀 – You’ll be leading product decisions in a company that values speed, innovation, and customer obsession.Hands-on environment 🛠 – We operate lean, so your contributions will be direct and meaningful.Fast-growing industry 📈 – AdTech / MarTech is a quickly evolving space, making this an exciting space to be in.If you’re passionate about building world-class software, delivering real value to users, and thriving in a fast-paced product-led environment— we’d love to hear from you!All qualified applicants will receive consideration for employment without regard to sex, gender identity, sexual orientation, race, color, religion, national origin, disability, protected veteran status, age, or any other characteristic.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot #clickguard #inc #senior #full #stack
    WEWORKREMOTELY.COM
    ClickGUARD Inc.: Senior Full Stack Developer (React.js & Node.js)
    We’re seeking a Senior Full Stack Developer who’s equally comfortable scaling infrastructure, architecting elegant APIs, and obsessing over clean, intuitive UIs. You’ll work on mission-critical systems in a fast-paced, product-led SaaS company that thrives in a competitive digital marketing space. The ideal candidate will have a deep understanding of frontend and backend technologies, along with hands-on experience in MongoDB, Google Cloud Platform (GCP), and Kubernetes.Key ResponsibilitesFrontend (React.js) ResponsibilitiesBuild dynamic, responsive, and reusable UI components using React.js (with Hooks, Context API, Redux, etc.).Write well-structured, maintainable, and testable code following modern JavaScript (ES6+) and TypeScript standards.Implement responsive designs using CSS3, SCSS, TailwindCSS, or Material-UI.Work closely with UI/UX designers to implement clean and user-friendly interfaces.Optimize frontend performance for fast loading and smooth interactions.Integrate RESTful and GraphQL APIs.Handle SSR (Server-Side Rendering) and client-side rendering efficiently.Backend (Node.js / Express.js) ResponsibilitiesDesign and develop scalable APIs and microservices using Node.js and Express.js.Implement middleware, authentication (OAuth2.0, JWT), authorization, and secure session management.Manage asynchronous jobs, queues, and background tasks using tools like BullMQPerform error handling, logging, and monitoring (using tools like Winston, Morgan, or Sentry).Implement caching strategies using Redis or in-memory stores.Ensure backend performance, scalability, and security best practices.Database and StorageDesign, manage, and optimize MongoDB schemas using Mongoose.Perform data modeling, aggregation, indexing, and query optimization for high-performance applications.Handle backups, migration scripts, and versioning of data layers.DevOps, Cloud & InfrastructureCompute Engine, Cloud Run, Cloud Storage, Cloud Pub/Sub, and Cloud Monitoring.Containerize applications using Docker, and orchestrate deployments using Kubernetes (GKE).Implement CI/CD pipelines using GitHub Actions, Cloud Build, or Jenkins.Ensure infrastructure reliability, scalability, and security (VPC, IAM, Firewalls).About the RoleThis is a full-stack engineering position with ownership of both frontend and backend architectureYou’ll contribute directly to building product experiences that solve real customer pain pointsYou’ll work in a fast-paced, product-led company focused on growth, speed, and measurable resultsWe expect strong technical problem-solving, a collaborative mindset, and a bias for actionYou’ll play a key role in building and scaling systems for high-performance and usabilityWhat We’re Looking For5+ years of hands-on experience in JavaScript/TypeScript, React.js, and Node.jsStrong understanding of MongoDB, Mongoose, and NoSQL data modelingExperience with Docker, Kubernetes, and GCP for cloud-native deploymentsFamiliarity with RESTful APIs, GraphQL, and real-time communication via WebSocketsAbility to design clean, intuitive user interfaces and optimize user flowsStrong debugging, problem-solving, and performance tuning skillsComfortable working in fast-moving environments with shifting prioritiesBonus: Experience with Next.js, event-driven systems, or AdTech/MarTech productsWhat’s in it for you?Competitive salary 💰 - Compensation that reflects your expertise and contributions.High-impact role 🚀 – You’ll be leading product decisions in a company that values speed, innovation, and customer obsession.Hands-on environment 🛠 – We operate lean, so your contributions will be direct and meaningful.Fast-growing industry 📈 – AdTech / MarTech is a quickly evolving space, making this an exciting space to be in.If you’re passionate about building world-class software, delivering real value to users, and thriving in a fast-paced product-led environment— we’d love to hear from you!All qualified applicants will receive consideration for employment without regard to sex, gender identity, sexual orientation, race, color, religion, national origin, disability, protected veteran status, age, or any other characteristic.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot
    0 Comments 0 Shares 0 Reviews
  • Colt DCS va construire cinq nouveaux datacenters en Essonne pour 2,3 milliards d’euros

    Colt Data Centre Servicesvient de lancer la construction du premier de cinq nouveaux datacenters que le fournisseur de solutions de...
    #colt #dcs #construire #cinq #nouveaux
    Colt DCS va construire cinq nouveaux datacenters en Essonne pour 2,3 milliards d’euros
    Colt Data Centre Servicesvient de lancer la construction du premier de cinq nouveaux datacenters que le fournisseur de solutions de... #colt #dcs #construire #cinq #nouveaux
    WWW.USINE-DIGITALE.FR
    Colt DCS va construire cinq nouveaux datacenters en Essonne pour 2,3 milliards d’euros
    Colt Data Centre Services (Colt DCS) vient de lancer la construction du premier de cinq nouveaux datacenters que le fournisseur de solutions de...
    0 Comments 0 Shares 0 Reviews
  • Critical Windows Server 2025 dMSA Vulnerability Enables Active Directory Compromise

    May 22, 2025Ravie LakshmananCybersecurity / Vulnerability

    A privilege escalation flaw has been demonstrated in Windows Server 2025 that makes it possible for attackers to compromise any user in Active Directory.
    "The attack exploits the delegated Managed Service Accountfeature that was introduced in Windows Server 2025, works with the default configuration, and is trivial to implement," Akamai security researcher Yuval Gordon said in a report shared with The Hacker News.
    "This issue likely affects most organizations that rely on AD. In 91% of the environments we examined, we found users outside the domain admins group that had the required permissions to perform this attack."
    What makes the attack pathway notable is that it leverages a new feature called Delegated Managed Service Accountsthat allows migration from an existing legacy service account. It was introduced in Windows Server 2025 as a mitigation to Kerberoasting attacks.

    The attack technique has been codenamed BadSuccessor by the web infrastructure and security company.
    "dMSA allows users to create them as a standalone account, or to replace an existing standard service account," Microsoft notes in its documentation. "When a dMSA supersedes an existing account, authentication to that existing account using its password is blocked."
    "The request is redirected to the Local Security Authorityto authenticate using dMSA, which has access to everything the previous account could access in AD. During migration, dMSA automatically learns the devices on which the service account is to be used which is then used to move from all existing service accounts."

    The problem identified by Akamai is that during the dMSA Kerberos authentication phase, the Privilege Attribute Certificateembedded into a ticket-granting ticketissued by a key distribution centerincludes both the dMSAs security identifieras well as the SIDs of the superseded service account and of all its associated groups.
    This permissions transfer between accounts could open the door to a potential privilege escalation scenario by simulating the dMSA migration process to compromise any user, including domain administrators, and gain similar privileges, effectively breaching the entire domain even if an organization's Windows Server 2025 domain isn't using dMSAs at all.
    "One interesting fact about this 'simulated migration' technique, is that it doesn't require any permissions over the superseded account," Gordon said. "The only requirement is to write permissions over the attributes of a dMSA. Any dMSA."
    "Once we've marked a dMSA as preceded by a user, the KDC automatically assumes a legitimate migration took place and happily grants our dMSA every single permission that the original user had, as though we are its rightful successor."

    Akamai said it reported the findings to Microsoft on April 1, 2025, following which the tech giant classified the issue as moderate in severity and that it does not meet the bar for immediate servicing due to the fact that successful exploitation requires an attacker to have specific permissions on the dMSA object, which suggests an elevation of privileges. However, a patch is currently in the works.
    Given that there is no immediate fix for the attack, organizations are advised to limit the ability to create dMSAs and harden permissions wherever possible. Akamai has also released a PowerShell script that can enumerate all non-default principals who can create dMSAs and list the organizational unitsin which each principal has this permission.
    "This vulnerability introduces a previously unknown and high-impact abuse path that makes it possible for any user with CreateChild permissions on an OU to compromise any user in the domain and gain similar power to the Replicating Directory Changes privilege used to perform DCSync attacks," Gordon said.

    Found this article interesting? Follow us on Twitter  and LinkedIn to read more exclusive content we post.

    SHARE




    #critical #windows #server #dmsa #vulnerability
    Critical Windows Server 2025 dMSA Vulnerability Enables Active Directory Compromise
    May 22, 2025Ravie LakshmananCybersecurity / Vulnerability A privilege escalation flaw has been demonstrated in Windows Server 2025 that makes it possible for attackers to compromise any user in Active Directory. "The attack exploits the delegated Managed Service Accountfeature that was introduced in Windows Server 2025, works with the default configuration, and is trivial to implement," Akamai security researcher Yuval Gordon said in a report shared with The Hacker News. "This issue likely affects most organizations that rely on AD. In 91% of the environments we examined, we found users outside the domain admins group that had the required permissions to perform this attack." What makes the attack pathway notable is that it leverages a new feature called Delegated Managed Service Accountsthat allows migration from an existing legacy service account. It was introduced in Windows Server 2025 as a mitigation to Kerberoasting attacks. The attack technique has been codenamed BadSuccessor by the web infrastructure and security company. "dMSA allows users to create them as a standalone account, or to replace an existing standard service account," Microsoft notes in its documentation. "When a dMSA supersedes an existing account, authentication to that existing account using its password is blocked." "The request is redirected to the Local Security Authorityto authenticate using dMSA, which has access to everything the previous account could access in AD. During migration, dMSA automatically learns the devices on which the service account is to be used which is then used to move from all existing service accounts." The problem identified by Akamai is that during the dMSA Kerberos authentication phase, the Privilege Attribute Certificateembedded into a ticket-granting ticketissued by a key distribution centerincludes both the dMSAs security identifieras well as the SIDs of the superseded service account and of all its associated groups. This permissions transfer between accounts could open the door to a potential privilege escalation scenario by simulating the dMSA migration process to compromise any user, including domain administrators, and gain similar privileges, effectively breaching the entire domain even if an organization's Windows Server 2025 domain isn't using dMSAs at all. "One interesting fact about this 'simulated migration' technique, is that it doesn't require any permissions over the superseded account," Gordon said. "The only requirement is to write permissions over the attributes of a dMSA. Any dMSA." "Once we've marked a dMSA as preceded by a user, the KDC automatically assumes a legitimate migration took place and happily grants our dMSA every single permission that the original user had, as though we are its rightful successor." Akamai said it reported the findings to Microsoft on April 1, 2025, following which the tech giant classified the issue as moderate in severity and that it does not meet the bar for immediate servicing due to the fact that successful exploitation requires an attacker to have specific permissions on the dMSA object, which suggests an elevation of privileges. However, a patch is currently in the works. Given that there is no immediate fix for the attack, organizations are advised to limit the ability to create dMSAs and harden permissions wherever possible. Akamai has also released a PowerShell script that can enumerate all non-default principals who can create dMSAs and list the organizational unitsin which each principal has this permission. "This vulnerability introduces a previously unknown and high-impact abuse path that makes it possible for any user with CreateChild permissions on an OU to compromise any user in the domain and gain similar power to the Replicating Directory Changes privilege used to perform DCSync attacks," Gordon said. Found this article interesting? Follow us on Twitter  and LinkedIn to read more exclusive content we post. SHARE     #critical #windows #server #dmsa #vulnerability
    THEHACKERNEWS.COM
    Critical Windows Server 2025 dMSA Vulnerability Enables Active Directory Compromise
    May 22, 2025Ravie LakshmananCybersecurity / Vulnerability A privilege escalation flaw has been demonstrated in Windows Server 2025 that makes it possible for attackers to compromise any user in Active Directory (AD). "The attack exploits the delegated Managed Service Account (dMSA) feature that was introduced in Windows Server 2025, works with the default configuration, and is trivial to implement," Akamai security researcher Yuval Gordon said in a report shared with The Hacker News. "This issue likely affects most organizations that rely on AD. In 91% of the environments we examined, we found users outside the domain admins group that had the required permissions to perform this attack." What makes the attack pathway notable is that it leverages a new feature called Delegated Managed Service Accounts (dMSA) that allows migration from an existing legacy service account. It was introduced in Windows Server 2025 as a mitigation to Kerberoasting attacks. The attack technique has been codenamed BadSuccessor by the web infrastructure and security company. "dMSA allows users to create them as a standalone account, or to replace an existing standard service account," Microsoft notes in its documentation. "When a dMSA supersedes an existing account, authentication to that existing account using its password is blocked." "The request is redirected to the Local Security Authority (LSA) to authenticate using dMSA, which has access to everything the previous account could access in AD. During migration, dMSA automatically learns the devices on which the service account is to be used which is then used to move from all existing service accounts." The problem identified by Akamai is that during the dMSA Kerberos authentication phase, the Privilege Attribute Certificate (PAC) embedded into a ticket-granting ticket (i.e., credentials used to verify identity) issued by a key distribution center (KDC) includes both the dMSAs security identifier (SID) as well as the SIDs of the superseded service account and of all its associated groups. This permissions transfer between accounts could open the door to a potential privilege escalation scenario by simulating the dMSA migration process to compromise any user, including domain administrators, and gain similar privileges, effectively breaching the entire domain even if an organization's Windows Server 2025 domain isn't using dMSAs at all. "One interesting fact about this 'simulated migration' technique, is that it doesn't require any permissions over the superseded account," Gordon said. "The only requirement is to write permissions over the attributes of a dMSA. Any dMSA." "Once we've marked a dMSA as preceded by a user, the KDC automatically assumes a legitimate migration took place and happily grants our dMSA every single permission that the original user had, as though we are its rightful successor." Akamai said it reported the findings to Microsoft on April 1, 2025, following which the tech giant classified the issue as moderate in severity and that it does not meet the bar for immediate servicing due to the fact that successful exploitation requires an attacker to have specific permissions on the dMSA object, which suggests an elevation of privileges. However, a patch is currently in the works. Given that there is no immediate fix for the attack, organizations are advised to limit the ability to create dMSAs and harden permissions wherever possible. Akamai has also released a PowerShell script that can enumerate all non-default principals who can create dMSAs and list the organizational units (OUs) in which each principal has this permission. "This vulnerability introduces a previously unknown and high-impact abuse path that makes it possible for any user with CreateChild permissions on an OU to compromise any user in the domain and gain similar power to the Replicating Directory Changes privilege used to perform DCSync attacks," Gordon said. Found this article interesting? Follow us on Twitter  and LinkedIn to read more exclusive content we post. SHARE    
    0 Comments 0 Shares 0 Reviews
  • 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 0 Reviews
  • The FBI is getting new technology to see through walls

    FBI headquarters in Washington DCShutterstock/Bob Korn
    The US Federal Bureau of Investigation (FBI) plans to buy radar technology that can detect people on the other side of walls, whether they are moving around, standing still or even lying down.
    The idea of using radar – a system that uses radio waves reflecting off objects to determine their location – in this way has been around for at least 20 to 30 years, says Hugh Griffiths at University College London.
    But he describes the field tests with this new system as “impressive” in demonstrating how “they’ve solved a lot of the…

    Source: https://www.newscientist.com/article/2479914-the-fbi-is-getting-new-technology-to-see-through-walls/?utm_campaign=RSS%7CNSNS&utm_source=NSNS&utm_medium=RSS&utm_content=home" style="color: #0066cc;">https://www.newscientist.com/article/2479914-the-fbi-is-getting-new-technology-to-see-through-walls/?utm_campaign=RSS%7CNSNS&utm_source=NSNS&utm_medium=RSS&utm_content=home
    #the #fbi #getting #new #technology #see #through #walls
    The FBI is getting new technology to see through walls
    FBI headquarters in Washington DCShutterstock/Bob Korn The US Federal Bureau of Investigation (FBI) plans to buy radar technology that can detect people on the other side of walls, whether they are moving around, standing still or even lying down. The idea of using radar – a system that uses radio waves reflecting off objects to determine their location – in this way has been around for at least 20 to 30 years, says Hugh Griffiths at University College London. But he describes the field tests with this new system as “impressive” in demonstrating how “they’ve solved a lot of the… Source: https://www.newscientist.com/article/2479914-the-fbi-is-getting-new-technology-to-see-through-walls/?utm_campaign=RSS%7CNSNS&utm_source=NSNS&utm_medium=RSS&utm_content=home #the #fbi #getting #new #technology #see #through #walls
    WWW.NEWSCIENTIST.COM
    The FBI is getting new technology to see through walls
    FBI headquarters in Washington DCShutterstock/Bob Korn The US Federal Bureau of Investigation (FBI) plans to buy radar technology that can detect people on the other side of walls, whether they are moving around, standing still or even lying down. The idea of using radar – a system that uses radio waves reflecting off objects to determine their location – in this way has been around for at least 20 to 30 years, says Hugh Griffiths at University College London. But he describes the field tests with this new system as “impressive” in demonstrating how “they’ve solved a lot of the…
    0 Comments 0 Shares 0 Reviews
CGShares https://cgshares.com