Nehal Fathemasafaranokhi.hashnode.dev·Nov 17, 2024CSS Grid vs Flexbox: When and Why to Use EachWeb developers often find themselves debating whether to use CSS Grid or Flexbox for their layouts. While both are powerful tools for modern web design, they shine in different scenarios. Let’s break down their strengths, differences, and best use ca...Discussgrid
Nehal Fathemasafaranokhi.hashnode.dev·Nov 11, 2024Understanding and Implementing the Masonry Layout in Web DesignWeb design often brings us creative solutions for showcasing content in unique, aesthetically pleasing ways. One layout that has gained popularity for displaying dynamic content such as images, cards, or posts is the masonry layout. This layout, famo...Discusswebdesign
Idorenyin Akaninyenedorendev.hashnode.dev·Oct 11, 2024Top interactive UI component libraries To have in your bookmarkOver the years we have seen the web evolved from static web pages to highly intuitive and interactive pages that actually in a subconscious way make users stay on them longer. In these recent times we have seen how building animated interactive compo...Discuss·600 readsUI
Surya Durgeshsuryatechie.hashnode.dev·Sep 27, 2024Flexbox Fundamentals: Creating Flexible LayoutsFlexbox, short for Flexible Box Layout, is a powerful CSS layout module that allows you to create complex, responsive layouts with ease. Unlike traditional layouts (like floats or grid systems), Flexbox is designed to distribute space dynamically and...Discuss·1 likeCSS
Madhur Guptamadhurgupta.hashnode.dev·Sep 17, 2024CSS Flexbox: Everything you need to knowWhen you add multiple elements on your webpage, and they automatically get aligned in a column, but what if you want to align them in a row instead? By default, these elements start from top, but what if you want to place them starting from bottom? ...Discuss·2 likes·32 readsCSS
woodstockwoodstock.hashnode.dev·Sep 11, 2024[App Router] 레이아웃 설정앱 라우터의 레이아웃 설정 App Router에서는 layout.tsx파일을 사용하여 특정 경로와 그 하위 경로에 공통적으로 적용될 레이아웃을 정의할 수 있다. . ├── src │ └── app │ ├── search │ │ ├── layout.tsx // search 하위 경로 레이아웃 │ │ └── page.tsx │ ├── book │ │ └── [id] │ ...DiscussNextJSapp router
woodstockwoodstock.hashnode.dev·Sep 11, 2024[Pages Router] 레이아웃 설정페이지 라우터의 레이아웃 설정 . ├── src │ ├── components │ │ ├── global-layout.tsx │ │ └── searchable-layout.tsx │ ├── pages │ │ ├── _app.tsx │ │ ├── book │ │ │ └── [[...id]].tsx │ │ ├── search │ │ │ └── index.tsx 1. 글로벌 레이아웃 ...DiscussNextJSNext.js
Michał Romanmichalroman.hashnode.dev·Jul 30, 2024Getting started with basic widgets in FlutterFlutter is an open-source framework created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. If you're just starting out with Flutter, understanding its fundament...DiscussFlutter
Syed Dayim Shahsyeddayimshah.hashnode.dev·Jul 10, 2024Effective Design and Structure Techniques for React Native LayoutsReact Native, with its robust framework and flexible components, offers developers a powerful toolkit for building mobile applications. Central to creating a seamless user experience is mastering the art of layouts. Here’s a comprehensive guide to de...DiscussReact
Harshal RanjhaniforCodeParrot 10x Dev10xdev.codeparrot.ai·Apr 21, 2024React Native’s Flexbox: A Visual GuideWhat is Flexbox? Flexbox is a layout model that allows you to design complex layouts more easily in React Native. It provides a more efficient way to distribute space and align items in a container, even when the size of the items is unknown or dynam...Discuss·16 likes·147 readsflexbox
![[App Router] 레이아웃 설정](https://cdn.hashnode.com/res/hashnode/image/upload/v1726059568225/620ad6b6-afd9-42b7-b687-bc9231f8b889.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[Pages Router] 레이아웃 설정](https://cdn.hashnode.com/res/hashnode/image/upload/v1726059328426/4970a31e-0a79-488b-82d8-a75709696871.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
