CSS 中可以通过 display: grid; 属性来实现网格布局，而弹性盒模型则可以通过 display: flex; 属性来实现。
网格布局（Grid Layout）是 CSS3 中新的布局方式，使用网格布局可以轻松地实现复杂的布局效果。
在网格布局中，我们需要定义一个容器元素，并给它设置 display: grid; 属性，表示这个容器元素使用网格布局。容器元素上还可以设置以下属性：
grid-template-columns：定义网格的列数和列宽；grid-template-rows：定义网格的行数和行高；grid-template-areas：定义网格的区域；grid-gap：定义网格之间的间隔。在网格布局中，我们需要将页面中的元素作为容器的子元素，并给它们设置一些属性来控制它们在网格中的位置和大小。这些属性包括：
grid-column-start：定义项目的起始列；grid-column-end：定义项目的结束列；grid-row-start：定义项目的起始行；grid-row-end：定义项目的结束行；grid-column：定义项目的起始列和结束列；grid-row：定义项目的起始行和结束行；grid-area：定义项目的区域。弹性盒模型（Flexbox）是 CSS3 中另一种新的布局方式，它可以轻松地实现响应式布局和自适应布局。
在弹性盒模型中，我们需要定义一个容器元素，并给它设置 display: flex; 属性，表示这个容器元素使用弹性盒模型。容器元素上还可以设置以下属性：
flex-direction：定义主轴方向；justify-content：定义主轴对齐方式；align-items：定义交叉轴对齐方式；flex-wrap：定义是否换行；align-content：定义多行交叉轴对齐方式。在弹性盒模型中，我们需要将页面中的元素作为容器的子元素，并给它们设置一些属性来控制它们在弹性盒模型中的位置和大小。这些属性包括：
flex-grow：定义项目的放大比例；flex-shrink：定义项目的缩小比例；flex-basis：定义项目的基准大小；flex：定义项目的放大比例、缩小比例和基准大小；order：定义项目的排列顺序；align-self：定义项目的交叉轴对齐方式。以上就是使用 CSS 实现网格布局和弹性盒模型的方法及相关属性。