background-imageプロパティのlinear-gradientで、1pxの線のみの格子模様と塗りと塗り無しの市松模様を作成します。
デモページはこちら

共通のCSSは以下になります。模様はdivタグの疑似要素で作成します。

.div-parent {
  position: relative;
  width: 100%;
  height: 148px;
  margin: 0 0 1em;
  background-color: #fff;
}
.div-parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
}

まず、1pxの線のみの格子模様です。background-imageに角度の異なるlinear-gradientを2つ指定します。最初が横線、2つ目が縦線です。

.style01::before {
  background-image: linear-gradient(90deg, #e1e2ed 1px, transparent 1px), linear-gradient(#e1e2ed 1px, transparent 1px);
}

次に、塗りと塗り無しの市松模様です。同じlinear-gradientを2つ指定し、2つ目はbackground-positionで位置をずらします。ずらす距離はbackground-sizeの半分です。

.style02::before {
  background-image: linear-gradient(45deg, #e1e2ed 25%, transparent 25%, transparent 75%, #e1e2ed 75%), linear-gradient(45deg, #e1e2ed 25%, transparent 25%, transparent 75%, #e1e2ed 75%);
  background-position: 0 0, 20px 20px;
}

background-sizeとbackground-positionを調整すれば、市松模様を大きくできます。

.style03::before {
  background-image: linear-gradient(45deg, #e1e2ed 25%, transparent 25%, transparent 75%, #e1e2ed 75%), linear-gradient(45deg, #e1e2ed 25%, transparent 25%, transparent 75%, #e1e2ed 75%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
}