CSS: автоматическое изменение размера элемента сетки
Я пытаюсь в какой-то степени изучить CSS. У меня был следующий код, в котором при изменении размера логотипа и стиля таблицы таблица переполнялась.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto; /* auto auto; */
background-color: #2196f3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<p>
A Grid Layout must have a parent element with the
<em>display</em> property set to <em>grid</em> or
<em>inline-grid</em>.
</p>
<p>
Direct child element(s) of the grid container automatically becomes
grid items.
</p>
<div class = "grid-container">
<div class = "grid-item">
<img
src = "https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
alt = "DefaultAlternativeText"
width = "DefaultWidth"
height = "DefaultHeight"
/>
</div>
<div class = "grid-item">
<img
src = "https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
alt = "DefaultAlternativeText"
width = "DefaultWidth"
height = "DefaultHeight"
/>
</div>
<div class = "grid-item">3</div>
<div class = "grid-item">4</div>
<div class = "grid-item">5</div>
<div class = "grid-item">6</div>
<div class = "grid-item">7</div>
<div class = "grid-item">8</div>
<div class = "grid-item">9</div>
</div>
</body>
</html>
Использование трех новых настроек в некоторой степени исправило это для меня:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto; /* auto auto; */
background-color: #2196f3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
/* Addeed */
overflow: hidden; /* NEW */
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<p>
A Grid Layout must have a parent element with the
<em>display</em> property set to <em>grid</em> or
<em>inline-grid</em>.
</p>
<p>
Direct child element(s) of the grid container automatically becomes
grid items.
</p>
<div class = "grid-container">
<div class = "grid-item">
<img
src = "https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
alt = "DefaultAlternativeText"
width = "DefaultWidth"
height = "DefaultHeight"
/>
</div>
<div class = "grid-item">
<img
src = "https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
alt = "DefaultAlternativeText"
width = "DefaultWidth"
height = "DefaultHeight"
/>
</div>
<div class = "grid-item">3</div>
<div class = "grid-item">4</div>
<div class = "grid-item">5</div>
<div class = "grid-item">6</div>
<div class = "grid-item">7</div>
<div class = "grid-item">8</div>
<div class = "grid-item">9</div>
</div>
</body>
</html>
Теперь нет переполнения, первое изображение выравнивается по центру, второе изображение обрезается. Что отчасти нормально.
Мои вопросы:
- Как можно было бы изменить размер изображения по размеру?
- Будет ли это решение работать с другими типами данных в этой сетке? Я планирую использовать http://datatables.net и помещать таблицы в эту сетку. Я хочу убедиться, что таблица читабельна и не переполняется.
Есть ли способ предотвратить изменение размера элемента сетки за пределы определенного? Например, если datatable должен иметь определенный размер, и пользователь открывает его на меньшем размере, я бы предпочел, чтобы скроллер был внизу / вверху, а затем сломал его.
Есть
grid-template-columns: auto;Добавляю еще авто авто авто чтоб получилось больше столбцов. Каким будет способ, чтобы при определенном размере это 3 столбца, но когда он уменьшается, он становится 2 столбца, а затем 1 столбец, когда он минимален. Как я могу добиться этого таким образом, чтобы это работало наиболее эффективно и не требовало от меня постоянно что-то менять.- Есть ли способ остановить дальнейшее изменение размера браузера (уменьшение его размера)? Я хотел бы, чтобы пользователь не изменял размер браузера, чтобы все было удобно для чтения.
@TemaniAf, если это 5 вопросов, связанных друг с другом. Я добавил все 5, потому что решение для первого может не работать для второго и не будет работать с 4-м или 5-м. Тогда я бы получил 5 решений, которые нельзя использовать вместе. Следовательно, почему я спросил все 5.
Ответы 1
- Вы можете изменить размер изображений, добавив
<meta name = "viewport" content = "width = divice-width, initial-scale = 1.0">в<head></head>section вместе сimg { max-width: 100%; height: auto; }в вашем разделе CSS. - Будьте осторожны при создании таблиц, чтобы они работали с наименьшим форматом в вашем целевом представлении. Использование ширины таблицы «1000 пикселей» не сработает, но «100%» может решить эти проблемы.
- да, так же, как у вас есть настройка
min-width, вы также можете указать настройкуmax-width. - Прямо сейчас все ваши
<div>складываются друг над другом. Если у вас есть 2 или 3 рядом, вы должны заключить их в «контейнер» или «строку» и добавитьfloat: left;в CSS для каждого из столбцов. Они должен сворачиваются друг под другом в зависимости от размера экрана зрителя. - Измените настройки
min-heightиmin-widthс «0» на желаемый размер.
фу! Это все?
Спасибо. Еще один вопрос - есть class = grid-container, и я предполагаю, что это то, что вы имеете в виду под контейнером? Как будет выглядеть строка, потому что сейчас строки, кажется, создаются самим контейнером в зависимости от количества "авто", которое я помещаю в столбцы-шаблон-сетки
Итак, у вас есть <div class = "grid-container">. Если вы хотите, чтобы все ваши <div> были рядом, добавьте: float: left; в CSS для .grid-item. Если вам нужны только два или три столбца, вы можете создать класс CSS (например, .grid-column) и добавить туда стиль float: left;. Если вы хотите иметь столбцы разной ширины, установите его с помощью атрибута grid-template-columns, для одинаковой ширины вы можете оставить его на auto, или использовать 30%, или 200px и т. д.
ты должен задать один вопрос, а не 5 ...