Is it possible to create a grid-like background in CSS without images or tables?

前端 未结 2 667
名媛妹妹
名媛妹妹 2021-02-03 10:59

I\'d like to create a background that looks something like an excel spreadsheet. White table cells, thin borders around each cell. I know how to do this easily with a single ima

2条回答
  •  逝去的感伤
    2021-02-03 11:16

    I have searched also for this problem and i found a very good solution:

    background-size: 40px 40px;    
    background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);
    

    To change the grid size, change the background-size and the last px option within the gradient. To change the grid width change the first px option within the gradient. First gradient is horizontal, second is for the vertical lines.

    for this demo I recognized that the css option:

    position: absolute
    

    was required. I will build up my grid now and if I get more information I will add them within a comment.

    Hope this helps :)

提交回复
热议问题