Блог

я сейчас изучаю css, и после завершения уроков по сетке мне нужно решить задания, но у меня здесь есть некоторые проблемы… посмотрите на код и сравните его с фотографией

 lt;div class="grid"gt;  lt;divgt;1lt;/divgt;  lt;divgt;2lt;/divgt;  lt;divgt;3lt;/divgt;  lt;divgt;4lt;/divgt;  lt;divgt;5lt;/divgt;  lt;divgt;6lt;/divgt;  lt;divgt;7lt;/divgt;  lt;divgt;8lt;/divgt; lt;/divgt;  *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }  .grid { background-color: #ddd; padding: 20px; width: 800px; height: 400px; text-align: center; margin: auto; display: grid; grid-template-columns: auto 1fr 1fr auto; grid-template-rows: 1fr auto; gap: 20px 20px; } .grid div{ background: #403f3f; color: white; }  

нажмите на меня, чтобы открыть фотографию

Во-первых, убедитесь, что ваш css находится либо в другом импортируемом файле, либо внутри тега.

Кроме этого, настройка текста довольно проста. Я бы сделал каждый div гибкой коробкой и выровнял элементы по центру, а также обосновал центр содержимого таким образом:

 *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }  .grid { background-color: #ddd; padding: 20px; width: 800px; height: 400px; text-align: center; margin: auto; display: grid; grid-template-columns: auto 1fr 1fr auto; grid-template-rows: 1fr auto; gap: 20px 20px; } .grid div{ background: #403f3f; color: white; display: flex; justify-content: center; align-items: center }  

Это простое исправление должно центрировать его по вертикали и горизонтали!!

Желаю удачи.

 .grid div{  display:flex;  /* for start flex */  align-items: center;  /* for rows center */  justify-content: center;  /* for columns center */ } or .grid div{  display:grid;  /* for start grid */  place-content: center;  /* rows and columns center */ }