마케팅 사이트에 일반적으로 사용되는 레이아웃입니다. 예를 들어 일반적으로 이미지, 제목, 제품의 일부 기능을 설명하는 텍스트가 포함된 3개의 항목이 한 행에 표시될 수 있습니다. 작은 화면에서는 카드가 깔끔하게 쌓이고 화면 크기가 커지면 펼쳐지도록 해야 합니다. 이 효과에 flexbox를 사용하면 화면 크기가 조절될 때 이러한 요소의 배치를 조정하기 위해 미디어 쿼리가 필요하지 않습니다. flex 약어는 flex:

aspect-ratio 속성을 사용하면 카드 크기를 조절할 때 녹색 시각적 블록이 이 16x9 가로세로 비율을 유지합니다. aspect-ratio: 16 / 9 를 사용하여 가로세로 비율을 준수합니다. 이 속성 없이 16x9 가로세로 비율을 유지하려면 padding-top 해킹 을 사용하고 56.25% 패딩을 적용하여 가로세로 비율을 설정해야 합니다. 곧 해킹을 방지하고 비율을 계산할 필요가 없도록 하는 속성이 제공될 예정입니다. 1 / 1

This demo uses container queries to create an intrinsic, responsive card. The card goes from a single-column layout at more narrow sizes to a two-column layout when it is at wider sizes. To create the container, first set containment on the parent:

A centering technique that only aligns content and doesn't change their size during the process. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only. See the full article for many more details about this technique and when it's efficient. Full article · Video on

Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a sticky footer, this layout is used for both websites and apps, across mobile applications (the footer is commonly a

In this demo, you are setting the width using clamp() like so: width: clamp(<min>, <actual>, <max>). This sets an absolute min and max size, and an actual size. With values, that can look like: The minimum size here is 23ch or 23

For this seventh example, combine some of the concepts you've already learned about to create a responsive layout with automatically-placed and flexible children. Pretty neat. The key terms to remember here are repeat, auto-(fit|fill), and minmax(),

For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main content. It's similar to the previous layout, but now with sidebars! To write this entire grid using a single line of code, use the grid-template

A centering technique that puts the content in the center via equal padding around all its sides. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

The main point demonstrated here is the use of justify-content: space-between, which places the first and last child elements at the edges of their bounding box, with the remaining space evenly distributed between the elements. For these cards, they

Use place-items: center to center an element within its parent. This enables the content to be perfectly centered within the parent, regardless of intrinsic size.

This demo takes advantage of the minmax() function for grid layouts. In the demo this function is used to set the minimum sidebar size to 100px, but on larger screens, letting that stretch out to 25%. The sidebar will always take up 25% of its

A centering technique for overlaying other content. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

A centering technique that is only a few lines of CSS, works great for many elements, but has the side effect of making children match the width of the widest element. See the full article for many more details about this technique and when it's

Another classic: the 12-span grid. You can quickly write grids in CSS with the repeat() function. Using: repeat(12, 1fr); for the grid template columns gives you 12 columns each of 1fr. Now you have a 12 column track grid, you can place child