CSS：如何使两个网格相等（其中一个在另一个之上）

Question

我正在尝试使用 React + Javascript 从头开始制作 carousel/slider。我认为有两层会很好。其中一个在另一个之上。上层将包含 window，我们可以在其中看到底部层的元素。

上层

id 是#window-容器
只有 3 列。（中心列将是滑块的 window。其他两列将被隐藏。每个网格的边框都涂有颜色。）

底层

id 是#slider-container。
有 4 列，但可以得到 10、20、100 或无限列。每列的背景颜色不同。

我希望上层和底层的列宽相等，但是现在不是。

无论底层有多少列，如何使它们相等？

你可以在这里查看我的开发：

body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
  
h1 {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: center;
}
  
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
  
.container {
    position: relative;
    border: 3px solid black;
    height: 300px;
    width: 100%;
    z-index: 0;
}
  
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider-container {
    position: absolute;
    box-sizing: border-box;
    /*background-color: yellow;*/
    height: 100%;
    z-index: 1;
}
  
/*****************************************************/
/*************** Window Container ********************/
/*****************************************************/
  
.window-container {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
  
.left {
    border: 1px solid green;
    grid-column: 1;
}
  
.right {
    border: 1px solid red;
    grid-column: 3;
}
  
#window {
    grid-column: 2;
    border: 1px solid #000000;
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="./css/styles.css">
    </header>
    <body>
        <div>
            <h1>Slider Scandiweb</h1>
            <div class = "container">
                <div class = "slider-container"></div>
                <div class = "window-container">
                    <div class = "left"></div>
                    <div id="window"></div>
                    <div class = "right"></div>
                </div>
            </div>
        </div>    
    </body>
    <script type="text/javascript">
        let e = document.querySelector("#window");
        //Set slider-container
        let elements = 10;
        let gap = 10;
        let sc = document.querySelector(".slider-container");
        //sc.style.backgroundColor = "red";
        sc.style.width = e.clientWidth * elements + (elements + 1) * gap + "px";
        sc.style.padding = "10px";
        sc.style.display = "grid";
        sc.style.gridTemplateColumns = "repeat(" + elements + ", 1fr)";
        sc.style.gap = "10px";
        //sc.style.height = "100%";
        //Creations of elements
        for (let i = 0; i < elements; i++) {
          let div = document.createElement("div");
          div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);;
          sc.appendChild(div);
        }      
    </script>
</html>

Answer 1

似乎 .slider-container 的宽度需要增加 elements 然后它按预期与 .window-container:

对齐

sc.style.width = e.clientWidth * elements + (elements + 1) * gap + elements + "px";

body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
  
h1 {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: center;
}
  
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
  
.container {
    position: relative;
    border: 3px solid black;
    height: 300px;
    width: 100%;
    z-index: 0;
}
  
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider-container {
    position: absolute;
    box-sizing: border-box;
    /*background-color: yellow;*/
    height: 100%;
    z-index: 1;
}
  
/*****************************************************/
/*************** Window Container ********************/
/*****************************************************/
  
.window-container {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
  
.left {
    border: 1px solid green;
    grid-column: 1;
}
  
.right {
    border: 1px solid red;
    grid-column: 3;
}
  
#window {
    grid-column: 2;
    border: 1px solid #000000;
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="./css/styles.css">
    </header>
    <body>
        <div>
            <h1>Slider Scandiweb</h1>
            <div class = "container">
                <div class = "slider-container"></div>
                <div class = "window-container">
                    <div class = "left"></div>
                    <div id="window"></div>
                    <div class = "right"></div>
                </div>
            </div>
        </div>    
    </body>
    <script type="text/javascript">
        let e = document.querySelector("#window");
        //Set slider-container
        let elements = 10;
        let gap = 10;
        let sc = document.querySelector(".slider-container");
        //sc.style.backgroundColor = "red";
        sc.style.width = e.clientWidth * elements + (elements + 1) * gap + elements + "px";
        sc.style.padding = "10px";
        sc.style.display = "grid";
        sc.style.gridTemplateColumns = "repeat(" + elements + ", 1fr)";
        sc.style.gap = "10px";
        //sc.style.height = "100%";
        //Creations of elements
        for (let i = 0; i < elements; i++) {
          let div = document.createElement("div");
          div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);;
          sc.appendChild(div);
        }      
    </script>
</html>

然而，这仍然不理想，因为它根据 e.clientWidth 设置宽度，所以它不会响应。如下设置也解决了这个问题：

sc.style.width = "calc(" + elements * 100/3 + "% - 20px)";

body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
  
h1 {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: center;
}
  
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
  
.container {
    position: relative;
    border: 3px solid black;
    height: 300px;
    width: 100%;
    z-index: 0;
}
  
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider-container {
    position: absolute;
    box-sizing: border-box;
    /*background-color: yellow;*/
    height: 100%;
    z-index: 1;
}
  
/*****************************************************/
/*************** Window Container ********************/
/*****************************************************/
  
.window-container {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
  
.left {
    border: 1px solid green;
    grid-column: 1;
}
  
.right {
    border: 1px solid red;
    grid-column: 3;
}
  
#window {
    grid-column: 2;
    border: 1px solid #000000;
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="./css/styles.css">
    </header>
    <body>
        <div>
            <h1>Slider Scandiweb</h1>
            <div class = "container">
                <div class = "slider-container"></div>
                <div class = "window-container">
                    <div class = "left"></div>
                    <div id="window"></div>
                    <div class = "right"></div>
                </div>
            </div>
        </div>    
    </body>
    <script type="text/javascript">
        let e = document.querySelector("#window");
        //Set slider-container
        let elements = 10;
        let gap = 10;
        let sc = document.querySelector(".slider-container");
        //sc.style.backgroundColor = "red";
        sc.style.width = "calc(" + elements * 100/3 + "% - 20px)";
        sc.style.padding = "10px";
        sc.style.display = "grid";
        sc.style.gridTemplateColumns = "repeat(" + elements + ", 1fr)";
        sc.style.gap = "10px";
        //sc.style.height = "100%";
        //Creations of elements
        for (let i = 0; i < elements; i++) {
          let div = document.createElement("div");
          div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);;
          sc.appendChild(div);
        }      
    </script>
</html>

CSS：如何使两个网格相等（其中一个在另一个之上）

CSS: How to make two grids equals (one of them over the other)

css

carousel

reactjs

css-grid