Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="grid-container">
- <div class="item-1">1</div>
- <div class="item-2">2</div>
- <div class="item-3">3</div>
- <div class="item-4">4</div>
- </div>
- .grid-container {
- display: grid;
- grid-template-columns: repeat(3,1fr);
- grid-gap: 20px;
- justify-items: center;
- }
- .item-1 {
- background-color: rgba(200,520,266,.75);
- border-color: #b4b4b4;
- grid-column: 1;
- grid-row: 1;
- }
- .item-2 {
- background-color: rgba(145,520,0,.75);
- grid-gap: 20px;
- }
- .item-3 {
- background-color: rgba(145,520,0,.75);
- grid-column: 3;
- grid-row: 1;
- }
- .item-4 {
- background-color: rgba(0,0,0,.25);
- border-color: transparent;
- grid-column: 2;
- grid-row: 2;
- }
- .grid-container {
- display: -ms-grid;
- display: grid;
- -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
- grid-template-columns: repeat(3,1fr);
- grid-gap: 20px;
- justify-items: center;
- }
- .item-1 {
- background-color: rgba(200,520,266,.75);
- border-color: #b4b4b4;
- -ms-grid-column: 1;
- grid-column: 1;
- -ms-grid-row: 1;
- grid-row: 1;
- }
- .item-2 {
- background-color: rgba(145,520,0,.75);
- grid-gap: 20px;
- }
- .item-3 {
- background-color: rgba(145,520,0,.75);
- -ms-grid-column: 3;
- grid-column: 3;
- -ms-grid-row: 1;
- grid-row: 1;
- }
- .item-4 {
- background-color: rgba(0,0,0,.25);
- border-color: transparent;
- -ms-grid-column: 2;
- grid-column: 2;
- -ms-grid-row: 2;
- grid-row: 2;
- }
- .item2half {
- background-color: rgb(20,100,255);
- border-color: transparent;
- }
- .grid-container {
- display: flex;
- justify-items: center;
- align-items: center;
- flex-wrap: wrap;
- }
- .item-1 {
- flex: 1 1 33.33%;
- background-color: rgba(200,520,266,.75);
- border-color: #b4b4b4;
- }
- .item-2 {
- flex: 1 1 33.33%;
- background-color: rgba(145,520,0,.75);
- }
- .item-3 {
- flex: 1 1 33.33%;
- background-color: rgba(145,520,0,.75);
- }
- .item-4 {
- flex-basis: 33.33%;
- /* important */
- margin: auto;
- background-color: rgba(0,0,0,.25);
- border-color: transparent;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement