React - Grid

※This blog implements a grid using MUI.

Grid

Definition

• A grid is a two-dimensional layout system that enables the placement of components in both horizontal and vertical directions. - In MUI, the grid operates based on CSS FlexBox[^2] for greater flexibility.

Features

• UI settings can be configured for smartphones (xs), tablets (sm), and desktops (md, lg, xl) - Each row displays 12 columns, and the number of columns can be adjusted per resolution
  • Example: xs={6} : 12/6=2, displaying 2 items per row - Flexbox-based content alignment supports various methods, including applying different values or displaying items in reverse order

How to Use

• Use the container prop to create a grid container - The Grid Item component must always exist as an item inside the Grid container and explicitly specify item - For spacing between items, add a value like spacing={3} inside the container to set the gap
• To position items within the grid, place code inside sx={{}} for application - Item size can be set using the global size property or device-specific resolutions (xs, sm, md, lg, xl). Adding flexGrow to the size automatically assigns the size

Example Code

- In this code, xs refers to the length of the item.

  A line has a default size of 12. If an item's size is 6, then 12/6=2, meaning it occupies half the container's size.

  - The size of this single line can be set within the parent grid container, such as **columns={10}**.

  xs, sm, md, lg, xl의 [다양한 해상도별](https://mui.com/material-ui/customization/breakpoints/#default-breakpoints) 크기 설정이 가능하다 <br> ​ <br> 이런식으로 사용이 가능하다
  
  ~~~react <Container maxWidth="md"> <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ justifyContent: "flex-start", alignItems: "center", // 아이템 수직 중앙 정렬
                  padding: "20px", display: "flex", // 디폴트값 flexWrap: "wrap", // 줄바꿈 허용 }}> {tempData.map((item) => ( <Grid item key={item.id}
                      xs={6} sm={4} md={3} > <Box sx={{ border: '1px solid #ddd', borderRadius: '4px', padding: '20px', textAlign: 'center', height: '100px',
                          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100px', wordBreak: 'break-word', //텍스트가 벗어날때 자동으로 줄 바꿈
                          overflow: 'hidden', }} onClick={() => alert(`실행됨 ${item.id}`)}> <Typography variant="h6">{item.title}</Typography> <Typography variant="body2">{item.content}</Typography> </Box> </Grid>
              ))} </Grid> </Container> ~~~ ![Image Alt 텍스트]({{link}}/assets/img/React/Grid/grid_test.png )

<br><br><br><br><br><br>

------

References

[Hands-On! Modern Web Application Development with Spring Boot and React](https://www.yes24.com/Product/Goods/119973506)[^1]

[Grid](https://mui.com/material-ui/react-grid/)

[This time, let's finally learn CSS Grid](https://studiomeal.com/archives/533)

[[React\] Displaying 4 Items Per Line in React (Display a Specific Number of Items Then Break to the Next Line, Using display:grid)](https://cocoon1787.tistory.com/820)

<br><br><br><br><br><br><br><br><br><br><br>



[^1]: Juha Hinkula, Hands-On! Modern Web Application Development with Spring Boot and React, Wikibooks, 2023, p. 171

[^2]: Developed for layout placement, this layout aligns items along either the horizontal or vertical axis.