使用网格temlate创建日历

Question

im正在尝试创建一个看起来像日历的日历。但是我缺少了一些东西，因为每个创建的div(天(都保存在第一个单元格中。我不知道该怎么解决。谢谢你的帮助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>
)
}

Answer 1

days-grid是一个网格，有only one child Month component，所以如果你想让网格工作，你必须设置许多子级，例如days component。简单的例子：

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>
);
}

一些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;
}