Flex Center first column-CodePudding

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div >
  <div >
    <span >1</span>
  </div>
  <div >
    <span >2</span>
  </div>
  <div >
    <span >3</span>
  </div>
  <div >
    <span >4</span>
  </div>
</div>

Question: how to make that 1 column is center and after it rest of the columns. Now the whole grid is centered

CodePudding user response：

Use margin-left: calc(50% - 40%); on flex-container. This way it is always dynamic with the calc. Then you can set width: 10%; on your flex-item's.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(50% - 40%);
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  width: 10%;
}

<div >
  <div >
    <span >1</span>
  </div>
  <div >
    <span >2</span>
  </div>
  <div >
    <span >3</span>
  </div>
  <div >
    <span >4</span>
  </div>
</div>

CodePudding user response：

So i create a grid has width:1000px;

than inside it i add 2 colums which have grid-template-columns: 1fr 1fr; 500px 500px

I create a variable in root which have your box width

:root{
  --width-box: 100px;
}

then i add a position:relative and a right: calc(var(--width-box) / 2); in .flex-container

which pushes that container 50px(half of box width) left for putting first items half in center.

Those 1px's are borders

:root{
  --width-box: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


body{
  min-height: 100vh;
  background-color: bisque;
  display: grid;
  place-content: center;
}

.container{
  width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid blue;
}

.flex-container {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  right: calc(var(--width-box) / 2);
}
.row {
  width: 100%;
}
.flex-item {
  display:block;
  background: tomato;
  padding: 5px;
  height: 100px;
  width: var(--width-box);
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid black;
}

 <div >
      <div ></div>
      <div >
        <div >
          <span >1</span>
        </div>
        <div >
          <span >2</span>
        </div>
        <div >
          <span >3</span>
        </div>
        <div >
          <span >4</span>
        </div>
      </div>
    </div>