im trying to create a calendar with would like to look like a calendar. Buut i've got something missing because every created div's (days) are saved into the one and first cell. I dont know how to fix that. Thanks for any help css

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    height: 100%;
    position: relative;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    border-top: solid 1px;
}

.calendar-day {
    position: relative;
    min-height: 100px;
    font-size: 22px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 20px;
  }

<React.Fragment>
            <div className="calendar-month">
                <CalendarHeader />
                <div className="days-grid">
                    <Month month={currentMonth} />
                </div>
            </div>
   </React.Fragment>

function Month({ month }) {
    return (
        <div>
            {
                month.map((row, i) => (
                    <React.Fragment key={i}>
                        {row.map((day, idx) => (
                            <Day day={day} key={idx} />
                        ))}
                    </React.Fragment>
                ))
            }
        </div >
    )
}

function Day({ day, rowIdx }) {
    return (
        <div className="calendar-day">
            {day.format()}
        </div>
    )
}

CodePudding user response：

days-grid is a grid and has only one child Month component, so if you want the grid works you must set many childs, for example the days component. simple example:

const App = () => {
  const myDays = [1,2,3,4,5,6,7,8,9,10,11]
  const buildDays = (days)=>days
     .map((cur,idx)=><div key={idx} className="my-day">{cur}</div>)
  return(
    <div className="my-grid">
      {buildDays(myDays)}
    </div>
  );
}

some css:

.my-grid{
  border: solid 2px royalblue;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}

.my-day{
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px royalblue;
}